JavaScript Form Validation : quick and easy!

Using client side JavaScript is an efficient way to validate the user input in web forms. When there are many fields in the form, the JavaScript validation becomes too complex.

The JavaScript class presented here makes the form validations many times easier.

Contents

1. Download the JavaScript form validation script

2. Using the form validation script

3. Adding a custom validation

4. Table of Validation Descriptors

5. Showing all the form validation errors together

6. Showing the form validation errors on the page itself

7. Form validation without coding!

How to add JavaScript Form Validation quickly

The idea is to create a set of "validation descriptors" associated with each element in a form. The "validation descriptor" is nothing but a string specifying the type of validation to be performed.

Each field in the form can have 0, 1, or more validations. For example, the input should not be empty, should be less than 25 chars, should be alpha-numeric, etc

You can associate a set of validation descriptors for each input field in the form.

Download the JavaScript form validation script

You can download the JavaScript form validation script here.

The zip file contains the java script file, documentation and examples.

Using the form validation script

1.Include gen_validatorv31.js in your html file just before closing the HEAD tag

<script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script></head>

2. Just after defining your form, Create a form validator object passing the name of the form

 <FORM name='myform' action=""> <!----Your input fields go here --> </FORM> <SCRIPT language="JavaScript"> var frmvalidator  = new Validator("myform");.... 

3. Now add the validations required

frmvalidator.addValidation("FirstName","alpha"); 

the first argument is the name of the field and the second argument is the validation descriptor, which specifies the type of validation to be performed.You can add any number of validations. The list of validation descriptors are provided at the end of the documentation.The optional third argument is the error string to be displayed if the validation fails.

frmvalidator.addValidation("FirstName","alpha");frmvalidator.addValidation("FirstName","req","Please enter your First Name");frmvalidator.addValidation("FirstName","maxlen=20","Max length for FirstName is 20");

4. Similarly, add validations for the fields where validation is required.That's it! You are ready to go.

Example

The example below will make the idea clearer<form action="" name="myform" ><table cellspacing="2" cellpadding="2" border="0"><tr>  <td align="right">First Name</td>  <td><input type="text" name="FirstName"></td></tr><tr>  <td align="right">Last Name</td>  <td><input type="text" name="LastName"></td></tr><tr>  <td align="right">EMail</td>  <td><input type="text" name="Email"></td></tr><tr>  <td align="right">Phone</td>  <td><input type="text" name="Phone"></td></tr>

<tr>  <td align="right">Address</td>  <td><textarea cols="20" rows="5" name="Address"></textarea></td></tr><tr>  <td align="right">Country</td>  <td>  <SELECT name="Country"><option value="" selected>[choose yours]<option value="008">Albania<option value="012">Algeria<option value="016">American Samoa<option value="020">Andorra<option value="024">Angola<option value="660">Anguilla<option value="010">Antarctica<option value="028">Antigua And Barbuda<option value="032">Argentina<option value="051">Armenia<option value="533">Aruba  </SELECT></td></tr><tr>  <td align="right"></td>  <td><input type="submit" value="Submit"></td></tr></table></form><script language="JavaScript" type="text/javascript"> var frmvalidator = new Validator("myform"); frmvalidator.addValidation("FirstName","req","Please enter your First Name"); frmvalidator.addValidation("FirstName","maxlen=20","Max length for FirstName is 20"); frmvalidator.addValidation("FirstName","alpha");  frmvalidator.addValidation("LastName","req"); frmvalidator.addValidation("LastName","maxlen=20");  frmvalidator.addValidation("Email","maxlen=50"); frmvalidator.addValidation("Email","req"); frmvalidator.addValidation("Email","email");  frmvalidator.addValidation("Phone","maxlen=50"); frmvalidator.addValidation("Phone","numeric");  frmvalidator.addValidation("Address","maxlen=50"); frmvalidator.addValidation("Country","dontselect=0");</script>

Some Additional Notes

The form validators should be created only after defining the HTML form (only after the </form> tag. )

Your form should have a distinguished name. If there are more than one form in the same page, you can add validators for each of them. The names of the forms and the validators should not clash. You can't use the javascript onsubmit event of the form if it you are using this validator script. It is because the validator script automatically overrides the onsubmit event. If you want to add a custom validation, see the section below

Adding a custom validation

If you want to add a custom validation, which is not provided by the validation descriptors, you can do so. Here are the steps: Create a javascript function which returns true or false depending on the validation.function DoCustomValidation(){  var frm = document.forms["myform"];  if(frm.pwd1.value != frm.pwd2.value)  {    sfm_show_error_msg('The Password and verified password don not match!',frm.pwd1);    return false;  }  else  {    return true;  }}

sfm_show_error_msg() displays the error message in your chosen style. The first parameter is the error message and the second parameter is the input object. Associate the validation function with the validator object.frmvalidator.setAddnlValidationFunction("DoCustomValidation"); 

The custom validation function will be called automatically after other validations.

If you want to do more than one custom validations, you can do all those validations in the same function.

function DoCustomValidation(){  var frm = document.forms["myform"];  if(false == DoMyValidationOne())  {    sfm_show_error_msg('Validation One Failed!');    return false;  }  else  if(false == DoMyValidationTwo())  {    sfm_show_error_msg('Validation Two Failed!');    return false;  }  else  {    return true;  }

}

where DoMyValidationOne() and DoMyValidationTwo() are custom functions for validation.

Clear All Validations

In some dynamically programmed pages, it may be required to change the validations in the form at run time. For such cases, a function is included which clears all validations in the validator object.

frmvalidator.clearAllValidations(); 

this function call clears all validations you set.You will not need this method in most cases.

Set focus on validation failure

By default, if there is a validation error, the focus is set on the input element having the error. You can disable this behavior by calling:

frmvalidator.EnableFocusOnError(false); 

Table of Validation Descriptors

requiredreq

The field should not be empty

maxlen=???maxlength=???

checks the length entered data to the maximum. For example, if the maximum size permitted is 25, give the validation descriptor as "maxlen=25"

minlen=???minlength=???

checks the length of the entered string to the required minimum. example "minlen=5"

alphanumeric /alnum

Check the data if it contains any other characters other than alphabetic or numeric characters

alphanumeric_space /alnum_s

Allows only alphabetic, numeric and space characters

num numeric

Check numeric data (allow only digits)

dec decimal

Allow numbers (with decimal point)

alpha alphabetic

Check alphabetic data.

alpha_s alphabetic_space

Check alphabetic data and allow spaces.

email The field is an email field and verify the validity of the data.

lt=???lessthan=???

Verify the data to be less than the value passed. Valid only for numeric fields. example: if the value should be less than 1000 give validation description as "lt=1000"

gt=??? Verify the data to be greater than the value passed. Valid only for numeric fields. 

greaterthan=???example: if the value should be greater than 10 give validation description as "gt=10"

regexp=???Check with a regular expression the value should match the regular expression.example: "regexp=^[A-Za-z]{1,20}$" allow up to 20 alphabetic characters.

dontselect=??

This validation descriptor is valid only for select input items (lists) Normally, the select list boxes will have one item saying 'Select One' or some thing like that. The user should select an option other than this option. If the index of this option is 0, the validation description should be "dontselect=0"

dontselectchkThis validation descriptor is valid only for check boxes. The user should not select th given check box. Provide the value of the check box instead of ?? For example, dontselectchk=on

shouldselchkThis validation descriptor is valid only for check boxes. The user should select th given check box. Provide the value of the check box instead of ?? For example, shouldselchk=on

selone_radio Checks whether at least one radio button is selected.

VERY EDUCATIVE

javascript form validation

There's nothing more troublesome than receiving orders, guestbook entries, or other form submitted data that are incomplete in some way. You can avoid these headaches once and for all with JavaScript's amazing way to combat bad form data with a technique called "form validation".

Advertise on Tizag.com

The idea behind JavaScript form validation is to provide a method to check the user entered information before they can even submit it. JavaScript also lets you display helpful alerts to inform the user what information they have entered incorrectly and how they can fix it. In this lesson we will be reviewing some basic form validation, showing you how to check for the following:

If a text input is empty or not If a text input is all numbers

If a text input is all letters

If a text input is all alphanumeric characters (numbers & letters)

If a text input has the correct number of characters in it (useful when restricting the length of a username and/or password)

If a selection has been made from an HTML select input (the drop down selector)

If an email address is valid

How to check all above when the user has completed filling out the form

This lesson is a little long, but knowing how to implement these form validation techniques is definitely worth the effort on your part. Remember to check out Tizag's HTML forms lesson if you need to brush up on your form knowledge.

form validation - checking for non-empty

This has to be the most common type of form validation. You want to be sure that your visitors enter data into the HTML fields you have "required" for a valid submission. Below is the JavaScript code to perform this basic check to see if a given HTML input is empty or not.

JavaScript Code:// If the length of the element's string is 0 then display helper messagefunction notEmpty(elem, helperMsg){

if(elem.value.length == 0){alert(helperMsg);elem.focus(); // set the focus to this inputreturn false;

}return true;

}

The function notEmpty will check to see that the HTML input that we send it has something in it. elem is a HTML text input that we send this function. JavaScriptstrings have built in properties, one of which is the length property which returns the length of the string. The chunk of code elem.value will grab the string inside the input and by adding on length elem.value.length we can see how long the string is.

As long as elem.value.length isn't 0 then it's not empty and we return true, otherwise we send an alert to the user with a helperMsg to inform them of their error and return false.

Working Example:<script type='text/javascript'>function notEmpty(elem, helperMsg){

if(elem.value.length == 0){alert(helperMsg);elem.focus();return false;

}return true;

}</script><form>Required Field: <input type='text' id='req1'/><input type='button'

onclick="notEmpty(document.getElementById('req1'), 'Please Enter a Value')"value='Check Field' />

</form>

Display:

Required Field:   

form validation - checking for all numbers

If someone is entering a credit card, phone number, zip code, similar information you want to be able to ensure that the input is all numbers. The quickest way to check if an input's string value is all numbers is to use a regular expression /^[0-9]+$/ that will only match if the string is all numbers and is at least one character long.

JavaScript Code:// If the element's string matches the regular expression it is all numbersfunction isNumeric(elem, helperMsg){

var numericExpression = /^[0-9]+$/;if(elem.value.match(numericExpression)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}

What we're doing here is using JavaScript existing framework to have it do all the hard work for us. Inside each string is a function called match that you can use to see if the string matches a certain regular expression. We accessed this function like so: elem.value.match(expressionhere).

We wanted to see if the input's string was all numbers so we made a regular expression to check for numbers [0-9] and stored it as numericExpression.

We then used the match function with our regular expression. If it is numeric then match will return true, making our if statement pass the test and our functionisNumeric will also return true. However, if the expression fails because there is a letter or other character in our input's string then we'll display our helperMsg and return false.

Working Example:<script type='text/javascript'>function isNumeric(elem, helperMsg){

var numericExpression = /^[0-9]+$/;if(elem.value.match(numericExpression)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}</script><form>Numbers Only: <input type='text' id='numbers'/><input type='button'

onclick="isNumeric(document.getElementById('numbers'), 'Numbers Only Please')"value='Check Field' />

</form>

Display:

Numbers Only:   

form validation - checking for all letters

This function will be identical to isNumeric except for the change to the regular expression we use inside the match function. Instead of checking for numbers we will want to check for all letters.

If we wanted to see if a string contained only letters we need to specify an expression that allows for both lowercase and uppercase letters: /^[a-zA-Z]+$/ .

JavaScript Code:// If the element's string matches the regular expression it is all lettersfunction isAlphabet(elem, helperMsg){

var alphaExp = /^[a-zA-Z]+$/;if(elem.value.match(alphaExp)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}

Working Example:<script type='text/javascript'>function isAlphabet(elem, helperMsg){

var alphaExp = /^[a-zA-Z]+$/;if(elem.value.match(alphaExp)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}</script><form>Letters Only: <input type='text' id='letters'/><input type='button'

onclick="isAlphabet(document.getElementById('letters'), 'Letters Only Please')"value='Check Field' />

</form>

Display:

Letters Only:   

form validation - checking for numbers and letters

By combining both the isAlphabet and isNumeric functions into one we can check to see if a text input contains only letters and numbers.

JavaScript Code:

// If the element's string matches the regular expression it is numbers and lettersfunction isAlphanumeric(elem, helperMsg){

var alphaExp = /^[0-9a-zA-Z]+$/;if(elem.value.match(alphaExp)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}

form validation - restricting the length

Being able to restrict the number of characters a user can enter into a field is one of the best ways to prevent bad data. For example, if you know that the zip code field should only be 5 numbers you know that 2 numbers is not sufficient.

Below we have created a lengthRestriction function that takes a text field and two numbers. The first number is the minimum number of characters and the second is the maximum number of a characters the input can be. If you just want to specify an exact number then send the same number for both minimum and maximum.

JavaScript Code:function lengthRestriction(elem, min, max){

var uInput = elem.value;if(uInput.length >= min && uInput.length <= max){

return true;}else{

alert("Please enter between " +min+ " and " +max+ " characters");elem.focus();return false;

}}

Here's an example of this function for a field that requires 6 to 8 characters for a valid username.

Working Example:<script type='text/javascript'>function lengthRestriction(elem, min, max){

var uInput = elem.value;if(uInput.length >= min && uInput.length <= max){

return true;}else{

alert("Please enter between " +min+ " and " +max+ " characters");elem.focus();return false;

}}</script><form>Username(6-8 characters): <input type='text' id='restrict'/><input type='button'

onclick="lengthRestriction(document.getElementById('restrict'), 6, 8)"value='Check Field' />

</form>

Display:

Username(6-8 characters):   

form validation - selection made

To be sure that someone has actually selected a choice from an HTML select input you can use a simple trick of making the first option as helpful prompt to the user and a red flag to you for your validation code.

By making the first option of your select input something like "Please Choose" you can spur the user to both make a selection and allow you to check to see if the default option "Please Choose" is still selected when the submit the form.

JavaScript Code:function madeSelection(elem, helperMsg){

if(elem.value == "Please Choose"){alert(helperMsg);elem.focus();return false;

}else{return true;

}}

Working Example:<script type='text/javascript'>function madeSelection(elem, helperMsg){

if(elem.value == "Please Choose"){alert(helperMsg);elem.focus();return false;

}else{return true;

}}</script><form>Selection: <select id='selection'><option>Please Choose</option><option>CA</option><option>WI</option><option>XX</option></select><input type='button'

onclick="madeSelection(document.getElementById('selection'), 'Please Choose Something')"value='Check Field' />

</form>

Display:

Selection:       

form validation - email validation

And for our grand finale we will be showing you how to check to see if a user's email address is valid. Every email is made up for 5 parts:

1. A combination of letters, numbers, periods, hyphens, plus signs, and/or underscores2. The at symbol @

3. A combination of letters, numbers, hyphens, and/or periods

4. A period

5. The top level domain (com, net, org, us, gov, ...)

Valid Examples: bobby.jo@filltank.net jack+jill@hill.com

the-stand@steven.king.com

Invalid Examples: @deleted.net - no characters before the @ free!dom@bravehe.art - invalid character !

shoes@need_shining.com - underscores are not allowed in the domain name

The regular expression to check for all of this is a little overkill and beyond the scope of this tutorial to explain thoroughly. However, test it out and you'll see that it gets the job done.

JavaScript Code:function emailValidator(elem, helperMsg){

var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;if(elem.value.match(emailExp)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}

Working Example:<script type='text/javascript'>function emailValidator(elem, helperMsg){

var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;if(elem.value.match(emailExp)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}</script><form>Email: <input type='text' id='emailer'/><input type='button'

onclick="emailValidator1(document.getElementById('emailer'), 'Not a Valid Email')"value='Check Field' />

</form>

Display:

Email:   

validating a form - all at once

If you've made it this far I commend you, but we're not done yet! The final step is to be able to perform all of these validation steps when the user is ready to submit their data.

Each form has a JavaScript event called onSubmit that is triggered when itssubmit button is clicked. If this even returns 0 or false then a form cannot be submitted, and if it returns 1 or true it will always be submitted. Wouldn't it be perfect if we could somehow make an if statement that said "If the form is valid submit it (1) else don't submit it (0)"? Well with a master formValidator function we can do just that.

formValidator will be somewhat like a list of checks that we want to do before a form is submitted. But before we can decide what we want to check for, we need to have our form!

HTML Form Code:<form onsubmit='return formValidator()' >First Name: <input type='text' id='firstname' /><br />Address: <input type='text' id='addr' /><br />Zip Code: <input type='text' id='zip' /><br />State: <select id='state'>

<option>Please Choose</option><option>AL</option><option>CA</option><option>TX</option><option>WI</option>

</select><br />Username(6-8 characters): <input type='text' id='username' /><br />Email: <input type='text' id='email' /><br /><input type='submit' value='Check Form' /><br /></form>

That's a lot of data to verify and the first thing we would probably want to check is that each field was at least filled out. To check for completion we will ensure no fields are empty and that the SELECT field has a selection. Here are the starting pieces of our master validation function formValidator.

JavaScript Code:function formValidator(){

// Make quick references to our fieldsvar firstname = document.getElementById('firstname');var addr = document.getElementById('addr');

var zip = document.getElementById('zip');var state = document.getElementById('state');var username = document.getElementById('username');var email = document.getElementById('email');

// Check each input in the order that it appears in the form!if(isAlphabet(firstname, "Please enter only letters for your name")){

if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){if(isNumeric(zip, "Please enter a valid zip code")){

if(madeSelection(state, "Please Choose a State")){if(lengthRestriction(username, 6, 8)){

if(emailValidator(email, "Please enter a valid email address")){

return true;}

}}

}}

}

return false;

}

The first part of this function is where we create easy references to our HTML inputs using the getElementById function. These quick references will make our next block of code much easier to read!

The second part uses a bunch of embedded if statements to see whether or not each field has the correct type of data. If every single one of those fields we check validates, then we'll return true and the form will be submitted successfully.

However, if just one of those if statements fails then the return false at the end of the function is reached and prevents the form for being submitted.

As you can see this function really does do quite a lot, definitely earning the title of formValidator. Notice how this one function references all of the functions we have covered in this lesson. By placing all of these checks in a central location you make your code easier to read and easier to change around in the future.

Now let's put all the necessary and HTML together and try it out!

all together now

Below we have taken the HTML form code and the new function formValidatorand plugged in all the other form validation functions taught in this lesson that are referenced in formValidator.

HTML & JavaScript Code:<script type='text/javascript'>

function formValidator(){

// Make quick references to our fieldsvar firstname = document.getElementById('firstname');var addr = document.getElementById('addr');var zip = document.getElementById('zip');var state = document.getElementById('state');var username = document.getElementById('username');var email = document.getElementById('email');

// Check each input in the order that it appears in the form!if(isAlphabet(firstname, "Please enter only letters for your name")){

if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){if(isNumeric(zip, "Please enter a valid zip code")){

if(madeSelection(state, "Please Choose a State")){if(lengthRestriction(username, 6, 8)){

if(emailValidator(email, "Please enter a valid email address")){

return true;}

}}

}}

}

return false;

}

function notEmpty(elem, helperMsg){if(elem.value.length == 0){

alert(helperMsg);elem.focus(); // set the focus to this inputreturn false;

}return true;

}

function isNumeric(elem, helperMsg){var numericExpression = /^[0-9]+$/;if(elem.value.match(numericExpression)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}

function isAlphabet(elem, helperMsg){var alphaExp = /^[a-zA-Z]+$/;if(elem.value.match(alphaExp)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}

function isAlphanumeric(elem, helperMsg){var alphaExp = /^[0-9a-zA-Z]+$/;if(elem.value.match(alphaExp)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}

function lengthRestriction(elem, min, max){var uInput = elem.value;if(uInput.length >= min && uInput.length <= max){

return true;}else{

alert("Please enter between " +min+ " and " +max+ " characters");elem.focus();return false;

}}

function madeSelection(elem, helperMsg){if(elem.value == "Please Choose"){

alert(helperMsg);elem.focus();return false;

}else{return true;

}}

function emailValidator(elem, helperMsg){var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;if(elem.value.match(emailExp)){

return true;}else{

alert(helperMsg);elem.focus();return false;

}}</script>

<form onsubmit='return formValidator()' >First Name: <input type='text' id='firstname' /><br />Address: <input type='text' id='addr' /><br />Zip Code: <input type='text' id='zip' /><br />State: <select id='state'>

<option>Please Choose</option><option>AL</option><option>CA</option><option>TX</option><option>WI</option>

</select><br />Username(6-8 characters): <input type='text' id='username' /><br />Email: <input type='text' id='email' /><br /><input type='submit' value='Check Form' /></form>

Display:

First Name: 

Address: 

Zip Code: 

State:          

Username(6-8 characters): 

Email: 

javascript alert - what is it?

If you do not have JavaScript enabled on your web browser, then you may have been able to avoid "alerts" in your internet adventures. The JavaScript alert is a dialogue box that pops up and takes the focus away from the current window and forces the web browser to read the message. View an alert message.

Advertise on Tizag.com

You may have noticed that you didn't get a JavaScript alert popup when you came to this page. That is because doing so would be in bad taste for a web designer. You see, alerts should be very, very rarely used and even then these following guidelines should be considered when using them.

when to use popups / alerts

JavaScript alerts are ideal for the following situations:

If you want to be absolutely sure they see a message before doing anything on the website. You would like to warn the user about something. For example "the following page contains

humor not suitable for those under the age of 14."

An error has occurred and you want to inform the user of the problem.

When asking users for confirmation of some action. For example, if they have just agreed to sign over the deed to their house and you want to ask them again if they are absolutely positive they want to go through with this decision!

Even though the above situations would all be valid times to use the alert function, you could also skip the alert popup and just have the error message, confirmation, etc displayed in plain HTML. More and more bigger sites are opting to lose JavaScript alerts and instead keep everything in HTML.

coding a simple javascript alert

Just for fun, let's suppose that we are making an alert for some website that asks people to hand over the deed to their house. We need to add an alert to be sure these people are in agreement. The following code will add an alert by using an HTML button and the onClick event.

HTML & JavaScript Code:

<form><input type="button" onclick="alert('Are you sure you want to give us the deed to your house?')" value="Confirmation Alert"></form>

Display:

The string that appears between the single quotes is what will be printed inside the alert box when the user clicks on the button. If the HTML Forms are confusing to you, be sure to brush up on our HTML Forms Lesson. Continue the tutorial to learn more about the different kinds of JavaScript pop ups that are at your disposal.