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>

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.


<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>


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:


<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>



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.

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.

[HIGHLIGHT=“”]
<!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(/[1]?[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>


  1. $ ↩︎

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 ( /[1]?\d+(\.[0]{2,})?$/ ) as a compromise. It allows an optional $ start of string and requires 2 or more zeros after the dot.


  1. $ ↩︎

Thank you all for the help. I love the SitePoint community!