Form Validation

Question

JS:

validate document.forms();

if (document.forms[0].userAge.value == "") {
    alert("Age field cannot be empty.");
     return false;
}


if (document.forms[0].userAge.value < 5) {
  alert("Your age input is not correct.");
  return false;
}


if (userage == isNumber) {
  alert("Your age input is not correct.");
  return false;
}

alert("Name and Age are valid.");
return true;

HTML:

     <label for="userAge">Age:</label>

    <input type="text" name="userAge" id="userAge" />

 </div>

If this is the code I have, how would I make it so that if someone were to enter a non number in the age text box an alert would come up saying " Your input is not correct"?

Answer 1

Edit: I originally suggested using parseInt with isNaN() to test if the input was non-numeric. Well, it seems that using a regex is preferrable not only formatching cases like "4a" correctly, but it's actually faster in many cases (surprise!).

I mocked up some HTML with a button to illustrate.

HTML:

<form>
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id="userAge" />
    <input type="button" id="test" name="test" value="Test" />
</form>

JavaScript:

function validateForm() {

    // get the input value once and use a variable
    // this makes the rest of the code more readable
    // and has a small performance benefit in retrieving
    // the input value once
    var userAge = document.forms[0].userAge.value;

    // is it blank?
    if (userAge === "") {
        alert("Age field cannot be empty.")
        return false;
    }

    // is it a valid number? testing for positive integers
    if (!userAge.match(/^\d+$/)) {
        alert("Your age input is not correct.")
        return false;
    }

    // you could also test parseInt(userAge, 10) < 5
    if (userAge < 5) {
        alert("Your age input is not correct.")
        return false;
    }

    alert("Name and Age are valid.");
    return true;
}

// trigger validateForm() however you want, I did this as an example
document.getElementById("test").onclick = validateForm;

​Here is a jsFiddle to demonstrate: http://jsfiddle.net/willslab/m2spX/6/

About the regex: userAge.match(/^\d+$/) returns true if userAge only contains a positive integer. The beginning / and ending / indicate a regular expression literal. \d indicates ASCII digits only. + matches one or more occurrences of the previous pattern (digits in this case). ^ indicates match from the beginning, and $ indicates match until the end. So /^\d+$/ is a regex literal matching only ASCII digits from beginning to end!

Also note that you can combine the last two if statements using an OR operator (||). I left these isolated in case you want to give each one a unique validation message.

It would look like this:

if (!userAge.match(/^\d+$/) || userAge < 5) {
    alert("Your age input is not correct.")
    return false;
}

Feel free to ask any questions about the code and I will explain. I hope that helps!

Answer 2

I recommend you to use the following Javascript which will not allow non-numeric characters in the text field.

function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {
        return false;
    }
    return true;
}

<input type="text" id="userAge" name="userAge" onkeypress="return isNumberKey(event);">

Answer 3

Try this solution

   <script language="javascript">
   function validate(){
  alert("validate ..."+document.forms[0].userAge.value);
  if (document.forms[0].userAge.value == ""){ 
    alert("Age field cannot be empty.");
    return false;
  }

  if (document.forms[0].userAge.value<5){
    alert("Your age input is not correct.");
    return false;
  }
   //provide a way to validate if its numeric number..maybe using regexp
   //if (isNumeric(userAge)){
   //   alert("Your age input is not correct.");
   //   return false;
   //}
   //alert"Name and Age are valid."
   return true;
  }
    </script>

The HTML should be

<form>
<div><label for="userAge">Age:</label>
<input type="text" name="userAge" id="userAge" onblur="validate()"/>
</div>
</form>

Answer 4

use the code below

  if(isNaN(document.forms[0].userAge.value)){
     alert('This is not a number');


  }