JavaScript - validate numeric only and within range

Question

I have an asp form which has a number of fields. On submit I want to check, using javascript that a tickbox has been selected and that an 'amount' field in within a given range AND has numbers only. I'm struggling to get it to check all three in one go - at the mometn i have the following:

<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["Amount"].value;
if (x<5 || x >250)
  {
  alert("Please complete all required fields - Amount you wish to save");
  return false;
  }

else if ( myForm.agreesubmit.checked == false )
  {
  alert ( "You Must Agree To The Terms and Conditions" );
  return false;
  } 

}
</script>

At the moment this is two seperate checks for tick box select and range.

Any ideas appreciated.

why do you want it all to be in one statement? You're checking for 2 different things and have 2 different responses. Seems 2 if statements are appropriate. And presumably invalid input would have a different expected alert response. So you should probably have 3 separate checks for 3 responses. — Ben McCormick, Aug 21 '12 at 21:15
here are some ideas on number validation: http://stackoverflow.com/questions/9326653/javascript-for-float-and-integer-number-validation — Ben McCormick, Aug 21 '12 at 21:17
Inside the same function body, you use both `document.forms["myForm"]` and `myForm` to reference the same form element. This is not consistent, and also the robustness varies between those two. You should be consistently using the more reliable form. — Šime Vidas, Aug 21 '12 at 21:19
It can be seperate statements, I just cant get it to use them both correctly and for the two checks to take place on the amoutn field. — grn_uk, Aug 21 '12 at 21:24

score 4 · Accepted Answer · answered Aug 21 '12 at 21:20

4

Create a function that can do this:

function validate(str, chk, min, max) {
  n = parseFloat(str);
  return (chk && !isNaN(n) && n >= min && n <= max);
}

then call it like so:

function validateForm()
{
  if(!validate(document.forms["myForm"]["Amount"].value, 
     document.forms["myForm"]["agreesubmit"].checked, 5, 250)) {
    alert("Please complete all required fields - Amount you wish to save");
    return false;
  }
}

answered Aug 21 '12 at 21:20

Mohamed Nuur

5,536
6
39
55

as a follow up to this, the amount field will allow commas and fullstops, is there a way I can say dont allow those, so whole numbers only? – grn_uk Aug 23 '12 at 19:28
1

change `parseFloat(str)` to `parseInt(str)` – Mohamed Nuur Aug 23 '12 at 20:29

score 2 · Answer 2 · edited Aug 23 '12 at 19:01

2

Try using the isNan(). Tutorial found at http://www.w3schools.com/jsref/jsref_isnan.asp

Something like:

if (isNaN(x) || x < 5 || x > 250))
{
    alert("Please complete all required fields - Amount you wish to save");
    return false;
}

Quick note you might be confused about the or/ands, so notice that the x<5 || x >250 is wrapped in () so that it can be partnered with the and numeric condition. Then, finally the whole if wraps the statements.

edited Aug 23 '12 at 19:01

BAF

445
2
10

answered Aug 21 '12 at 21:14

Jared Drake

982
4
12

isNaN is the best solution to this that I've ever found – Mike Aug 21 '12 at 21:17
shouldn't that be `|| isNaN(x)`? Using `&&` would make it only true if it was numeric and not numeric. – Dylan Aug 21 '12 at 21:22
@Dylan "within a given range AND has numbers only" – Jared Drake Aug 22 '12 at 14:01
`isNaN` checks if it's "not a number". `(x<5 || x >250) && isNaN(x)` will never, ever return true. – Dylan Aug 23 '12 at 18:55
I wanted to edit the code snippet and add this description : Added the missing opening parenthesis just before `x < 5 || x > 250)`. But I received this error message : "Edits must be at least 6 characters; is there something else to improve in this post?" – Rob Waa Apr 10 '18 at 06:42

score 0 · Answer 3 · answered Aug 21 '12 at 21:15

This will ensure it has numbers only first, then check the number against a range.

<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["Amount"].value;
if( String(x).search(/^\s*(\+|-)?((\d+(\.\d+)?)|(\.\d+))\s*$/) != -1
&&( x<5 || x >250 ))
  {
  alert("Please complete all required fields - Amount you wish to save");
  return false;
  }

else if ( myForm.agreesubmit.checked == false )
  {
  alert ( "You Must Agree To The Terms and Conditions" );
  return false;
  } 

}
</script>

via http://ntt.cc/2008/05/10/over-10-useful-javascript-regular-expression-functions-to-improve-your-web-applications-efficiency.html

JavaScript - validate numeric only and within range

3 Answers3