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
– Ben McCormick, Commented Aug 21, 2012 at 21:15
here are some ideas on number validation: stackoverflow.com/questions/9326653/… — Ben McCormick
– Ben McCormick, Commented Aug 21, 2012 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
– Šime Vidas, Commented Aug 21, 2012 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
– grn_uk, Commented Aug 21, 2012 at 21:24

Mohamed Nuur · Accepted Answer · 2012-08-21 21:20:58Z

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, 2012 at 21:20

Mohamed Nuur

5,6757 gold badges42 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

grn_uk Over a year ago

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?

Mohamed Nuur Over a year ago

change parseFloat(str) to parseInt(str)

BAF · Accepted Answer · 2012-08-23 19:01:41Z

3

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, 2012 at 19:01

BAF

4452 silver badges10 bronze badges

answered Aug 21, 2012 at 21:14

Jared Drake

9645 silver badges12 bronze badges

5 Comments

Mike Over a year ago

isNaN is the best solution to this that I've ever found

Dylan Over a year ago

shouldn't that be || isNaN(x)? Using && would make it only true if it was numeric and not numeric.

Jared Drake Over a year ago

@Dylan "within a given range AND has numbers only"

Dylan Over a year ago

isNaN checks if it's "not a number". (x<5 || x >250) && isNaN(x) will never, ever return true.

Rob Waa Over a year ago

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

T.W.R. Cole · Accepted Answer · 2012-08-21 21:15:51Z

0

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

answered Aug 21, 2012 at 21:15

T.W.R. Cole

4,1661 gold badge21 silver badges26 bronze badges

Collectives™ on Stack Overflow

JavaScript - validate numeric only and within range

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related