Validating Numerical Input with JavaScript

Subscribe Now

Receive alert message from us when new articles submitted to our site for free.

Validating Numerical Input with JavaScript

By: David Morse

Article Word Count: 756 words [Comments (0)]
Total Views: 134 Views

What? Make a mistake entering data? Who me? NO WAY! Rightâ€¦

Every form of data input by a user should be validated in some

form or fashion. If you get

clean data in, you wonâ€™t get garbage out. This tutorial is going

to explain how to validate

numerical data entered into a form using JavaScript.

First, let us begin with the code to insert the JavaScript into

your HTML document.

Place these lines between the and tags.

This line tells the web browser to expect some JavaScript code

and signal the beginning of

the script:

So now the format should look something like this:

My Title

Now on to validating the numerical input.

First we will create a function with one arument:

function validate(mydata){

These lines will test for a blank enty then prompt the user for

input:

if (mydata == ""){ alert("Please enter a number.") }

Next we will create a for loop which will look at each character

in the data until it

reaches the end:

for(var i=0;i < mydata.length;i++){

Now create a variable and assign the counter variable value to

it:

var mydigit = mydata.charAt(i)

To screen out symbols, punctuation, and letters, place an if

statement in the loop:

if(mydigit < "0" || mydigit > "9"){

The || in the if statement scans for both conditions.

The next line will alert the user to any mistakes he/she has

made:

alert(mydigit + " is not a number.")

Here is the complete code including HTML:

=============================================

Numerical Validation

LANGUAGE="JavaScript">

Guess a

number between 1 and 1000:

TYPE="submit" VALUE="Submit" onClick="return

validate(this.form.elements[0].value)">

=============================================

You can test the above code by copying and pasting it into a

text document then view it in

your browser.

And that's how easy it is to test user input for numerical

input.

Grab this articles

<h1>Validating Numerical Input with JavaScript</h1> What? Make a mistake entering data? Who me? NO WAY! Rightâ€¦ Every form of data input by a user should be validated in some form or fashion. If you get clean data in, you wonâ€™t get garbage out. This tutorial is going to explain how to validate numerical data entered into a form using JavaScript. First, let us begin with the code to insert the JavaScript into your HTML document. Place these lines between the <BODY> and </BODY> tags. This line tells the web browser to expect some JavaScript code and signal the beginning of the script: <SCRIPT LANGUAGE = â€œJavaScriptâ€> Next let us hide the code from web browsers that are not capable of reading the script with this line: <!â€”HIDE Then to finish the standard JavaScript entry, place these lines after your code: //STOP HIDING--> </SCRIPT> So now the format should look something like this: <HTML> <HEAD> <TITLE>My Title</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY> </HTML> Now on to validating the numerical input. First we will create a function with one arument: function validate(mydata){ These lines will test for a blank enty then prompt the user for input: if (mydata == ""){ alert("Please enter a number.") } Next we will create a for loop which will look at each character in the data until it reaches the end: for(var i=0;i < mydata.length;i++){ Now create a variable and assign the counter variable value to it: var mydigit = mydata.charAt(i) To screen out symbols, punctuation, and letters, place an if statement in the loop: if(mydigit < "0" || mydigit > "9"){ The || in the if statement scans for both conditions. The next line will alert the user to any mistakes he/she has made: alert(mydigit + " is not a number.") Here is the complete code including HTML: ============================================= <HTML> <HEAD> <TITLE>Numerical Validation</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> </BODY> <FORM> <H3>Guess a number between 1 and 1000:</H3> <INPUT TYPE="text"> <INPUT TYPE="submit" VALUE="Submit" onClick="return validate(this.form.elements[0].value)"> </FORM> </BODY> </HTML> ============================================= You can test the above code by copying and pasting it into a text document then view it in your browser. And that's how easy it is to test user input for numerical input. More <a href="http://www.articlesroom.com">free articles</a> from <a href="http://www.articlesroom.com">http://www.articlesroom.com</a>

Subscribe Now

Sponsors

Categories

Home / Computer Programming / Javascript

Validating Numerical Input with JavaScript

Guess a

number between 1 and 1000:

Grab this articles

Related articles

Newest Articles

Most Popular Articles