Validating Numerical Input with JavaScript by David Morse
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"> <!--HIDE Insert YOUR code here...
//STOP HIDING--> </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"> <!--HIDE function validate(mydata){ if (mydata ==
""){ alert("Please enter a number.") } for(var i=0;i < mydata.length;i++){
var mydigit = mydata.charAt(i) if(mydigit < "0" || mydigit > "9"){
alert(mydigit + " is not a number.") return false } }
document.forms[0].submit("#") return true } //STOP HIDING--> </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.
About the Author
(c)2004 BiosBrain David Morse is the owner of http://www.biosbrain.com
which is a full service support site featuring articles on programming,
graphics, web-based business and more! Come visit us today!
|
