simple form validation with JavaScript
This is a simple how-to instuction for those who wants to validate web-forms with set of JavaScript functions before submitting. That can be a case if you have a small form with a couple of "required" fields - i.e. fields you definetly want user to fill in.
WARNING - We DO NOT pretend that following code is ideal way to validate the form, we only propose simple way to validate form fields that will work in most cases.
VERY IMPORTANT NOTE - there's no simple way to make fields mandatory in a way so user will not be able to cheat it :(
working example
Let's say that you have this form:
And you want your vistors to fill this form and make all fields madatory including checkbox. You can try this form above (it will not submit anything but will require you to fill all fields)
Let's figure out what kind of validation each field require:
- Name - this field should be not empty (there is no other way to know if user typed in a real name :) ) - this not includes blank spaces or tabulation simbols although.
- Email - this field should contain email address of the common view, like foo@server.com. There are other ways to verify if this email is real but this will require some other skills and programming.
- checkbox - this one must be checked
So form should allow to submit itself only if all three fields are filled correctly.
We will be using following three JavaSscript functions to validate the content of the form:
if value is empty
function isEmpty( str){
strRE = new RegExp( );
strRE.compile( '^[\s ]*$', 'gi' );
return strRE.test( str.value );
}
if value is syntactically NOT valid email address
function notValidEmail( str ){
mailRE = new RegExp( );
mailRE.compile( '^[\._a-z0-9-]+@[\.a-z0-9-]+[\.]{1}[a-z]{2,4}$', 'gi' );
return !(mailRE.test( str.value ));
}
if checkbox is NOT checked
function notChecked( box ){
if( box.checked ){
return false;
}
else{
return true;
}
}
Now finally, how to use these three strange functions to validate the form. Lets look into the code of our form you can see above. We omitted in the following code some nice formatting but general idea of validation and validating code are the same.
<form action="" method="post">
Name:<input type="text" name="name">
Email:<input type="text" name="email">
<input type="checkbox" name="subscribe" value="yes"> I want to subscribe!
<input type="submit" value="submit" onclick="return checkForm(this.form)">
</form>
This return checkForm(this.form) in the submit button tag allows us to check form content before sending it, if form is okay then this function would return "true" and form will be submitted, if not then it will return "false" and user will be prompted with alert that some field is missed or misspelled.
Let's build this checkForm() function!
//it accepts "form" as parameter
function checkForm( form ){
//lets check if Name text field is empty. This field has name "name".
if( isEmpty( form.name ) ){
alert( 'Name is required field!' );
return false;
}
//now let's check if email is correct. This field name is "email"
if( notValidEmail( form.email ) ){
alert( 'Email is required field!' );
return false;
}
//now let's check if checkbox is checked. This field name is "subscribe"
if( notChecked( form.subscribe ) ){
alert( 'Subscribe box is required field!' );
return false;
}
return true;
}
Now all you need to have this form validation on your page - put all four functions between <script> and </script> tags somwhere on your page and dont forget to put this return checkForm(this.form) into your form submit button tag. And the last and most important - you have to build your own checkForm() function - use one of the three validating functions for each of your "required" fields.
If you found any mistakes or have some notes and suggestions, please feel free to contact us.