SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Validation

    I'm using a simple script to allow for a pop-up letting the user add a new value to the drop down when they select 'other'. I want to ensure the value entered is 1) at least 10, and 2) the value entered is a doller amount (i.e. 10 or 10.00 NO OTHER CHARACTERS).


    <script type="text/javascript">
    function changed(el){
    if(el.options[el.selectedIndex].value=='other') {addoption(el);}
    }
    function addoption(el){
    var txt=prompt('Please enter your donation amount - Minimum $10 - Enter only numbers:');
    if(txt==null) {return;}
    var val=prompt('Please re-enter your donation amount - Minimum $10 - Enter only numbers:');
    // if(val==null) {return;}
    var o=new Option( txt, val, false, true);
    el.options[el.options.length]=o;
    }
    </script>

    *** See attachement for screen grab of pop-up ***

    === THE HTML ===

    <select name="Price_Add" onchange="changed(this)" id="Price_Add" >
    <option value="10">10
    <option value="25">25
    <option value="50">50
    <option value="100">100
    <option value="250" selected="selected">250
    <option value="500">500
    <option value="2000">1,000
    <option value="2000">2,000
    <option value="5000">5,000
    <option value="10000">10,000
    <option value="other">Other
    </select>
    Attached Images Attached Images

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have modified your script to add the input to the select options. I am not sure why you want to do it this way. It would be better to use the input in the prompt box as the donation amount instead. However, the following script does as you want, including the tests for correct input.

    Code JavaScript:
    <script type="text/javascript">
    <!--
     function changed(obj)
      {  // if "other" has been selected
         if(obj.options[obj.selectedIndex].value=="other") 
            { var txt=window.prompt('Please enter your donation amount in numbers - Minimum $10',"")
             // use new number to separate numbers from alph chars
              var txtValue= new Number(txt);
              if(isNaN(txtValue)){ errorMsg(txtValue,obj); return; }
               // ----- 
             // get rid of cents by rounding down 
              txtValue=Math.floor(txtValue);
             // check if number is 10 or greater 
                if(txtValue<10){ errorMsg(txtValue,obj); return; }
               // ----- 
           //  add new option to drop down list
            var o=new Option( txtValue, txtValue, false, true);
            obj.options[obj.options.length]=o;
           } 
           // this is the value entered 
            alert(obj.value)
       } 
     // -------      
      function errorMsg(txtValue,obj)
       { alert(" "+txtValue+" is an invalid entry - Please try again"); 
               obj.options.selectedIndex="0";
       }
     
    // -------------  
     
    //-->
    </script>

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If the user enters letters then your error function doesn't show the correct invalid input.
    I have just run it through all of my browsers again and it works correctly with both alpha and numeric characters. What are we doing differently here?

    The only difference I can see is that I moved the selected option to 10, rather than 250, since this is the minimum amount. I can't see why that would cause a problem.

    I did also discover another interesting bug will retesting if you enter "2E3" it is interpreted as "2000", but that is unlikely to be a show stopper.

    Here is the body portion that I left out of my original post:

    Code HTML:
    <body>
     
    <p><select name="Price_Add" onchange="changed(this)" id="Price_Add">
    <option value="10" selected>10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="250">250</option>
    <option value="500">500</option>
    <option value="2000">1,000</option>
    <option value="2000">2,000</option>
    <option value="5000">5,000</option>
    <option value="10000">10,000</option>
    <option value="other">Other</option>
    </select> </p>
     
    </body>

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AllanP View Post
    I did also discover another interesting bug will retesting if you enter "2E3" it is interpreted as "2000", but that is unlikely to be a show stopper.
    That isn't a bug since as far as JavaScript is concerned 2e3 is a valid way of representing 2000. With any number containing an e JavaScript considers the number following the e to be the power of ten to multiply the number before the e by. Internally floating point numbers are always stored with the two parts since that allows for a far greater range of values in the same amount of space.

    You mught have problems if you don't place an upper limit on the number you allow since if someone enters 1e100 that corresponds to 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000.00 and JavaScript supports much bigger numbers than even that.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quite correct. The new Number method has its problems. But, as they say, if at first you don't succeed ...

    Here is a method based on regular expressions which does work.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Dollar inout box</title>
    <script type="text/javascript">
    <!--
     function changed(obj)
      {  var stringEntered=obj.value;
      // if "other" has been selected
         if(obj.options[obj.selectedIndex].value=="other") 
            { var txt=window.prompt('Please enter your donation amount in numbers - Minimum $10',"")
            // separate numbers from alph chars  
              var result=txt.match(/^[$]?[0-9]{2,5}$/gi);    // looks for optional dollar sign followed by 2-5 digits before end of string.   
              if(result==null){ errorMsg(txt,obj); return; }
               // ----- 
            // remove leading $ if it exists 
               txt=txt.replace("$","");
            // add new option to drop down list
               var o=new Option( txt, txt, false, true);
               obj.options[obj.options.length]=o;
               obj.options.selectedIndex="0";
            // this is the value entered from Other 
               alert(txt)
               return;
           } 
           // this is the value entered from list 
            alert(stringEntered)
       } 
     // -------      
      function errorMsg(txt,obj)
       { alert(" "+txt+" is an invalid entry - Please try again"); 
               obj.options.selectedIndex="0";
       }
     
    // -------------  
     
    //-->
    </script>
    </head>
     
    <body>
     
    <p><select name="Price_Add" onchange="changed(this)" id="Price_Add">
    <option value="10" selected>10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="250">250</option>
    <option value="500">500</option>
    <option value="2000">1,000</option>
    <option value="2000">2,000</option>
    <option value="5000">5,000</option>
    <option value="10000">10,000</option>
    <option value="other">Other</option>
    </select> </p>
     
    </body>
     
    </html>

  6. #6
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I agree that 10.00 should be acceptable. Your regEx ( /^\d+(\.[0]*)?$/ ) does allow it, but it also allows 10. and 10.0, which I don't think are acceptable. Also your regEx does not allow a $ as a starting character. This is definitely a possibility and should be allowed.

    I suggest ( /^[$]?\d+(\.[0]{2,})?$/ ) as a compromise. It allows an optional $ start of string and requires 2 or more zeros after the dot.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for the help. I love the SitePoint community!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •