Basic: Form Validation using JavaScript

This is a simple tutorial helps you start with form validation. In this tutorial we’ll build a simple XHTML form with JavaScript validation. You can then adapt this form to your own requirements.

XHTML Form

<form method="post" action="#nosend.php" onsubmit="return validate()" id="basicFormVal">
	<label for="Name">Name:</label>
	<input type="text" id="name" name="name"/>

	<label for="Phone">Phone:</label>
	<input type="text" id="phone" name="phone"/>

	<label for="E-Mail">E-Mail:</label>
	<input type="text" id="email" name="email"/>

	<label for="Country">Country:</label>
	<select id="country">
	        <option selected="selected">Please Select your Country</option>
		<option value="DZ">Algeria</option>
		<option value="AS">American Samoa</option>
		<option value="ZM">Zambia</option>
		<option value="ZW">Zimbabwe</option>
	</select>

	<label for="Feedback">Feedback:</label>
	<textarea id="feedback" rows="6" cols="40"></textarea>

	<input type="submit" value="Submit" id="submitBtn" />
	<input type="reset" value="Reset" id="resetBtn" />

	</form>


The below JavaScript checks if any fields are left empty. If the field is blank, an alert box alerts an error message, the function returns false, and the form will not be submitted:

JavaScript

function validate()
{
  var myForm  = document.getElementById("basicFormVal");
  if(myForm)
    {
      if (myForm.name.value == "" || myForm.phone.value == "" || myForm.email.value == "" || myForm.country.selectedIndex == 0 || myForm.feedback.value == "")
        {
          alert ("Please fill all the fields");
        }
        else
        {
          alert ("Good to submit");
          return true;
        }
    }
}

Here is a bit of explanation on how this works:

Prerequisites: You should already be familiar with XHTML before reading further.

The JavaScript function needs to be placed in the XHTML like below:

<form method="post" action="#nosend.php" onsubmit="return validate()" id="basicFormVal">

The function in the JavaScript is called when the form is submitted. JavaScript treats the XHTML as a tree structure which is called as Document Object Model(DOM). If you can picture this it will be much easier to understand how JavaScript works. Let’s examine the below:

var myForm = document.getElementById("basicFormVal");

The above statement is trying to find the element or the XHTML tag with an id “basicFormVal” with the help of document.getElementById(“basicFormVal”). Once it finds the tag it will store it in a variable myForm. Now myForm can be used as a reference point to read / manipulate the tags inside the <form> tag.

Let’s examine the next bits of code in the JavaScript

	
        myForm.name.value == ""
	myForm.phone.value == ""
	myForm.email.value == ""
	myForm.country.selectedIndex == 0 
	myForm.feedback.value == ""

Note: if you are not familiar with If…else or the conditional operators please go through these tutorials.

name, phone, email, country, feedback are the ids’ on the tags inside the <form> tag. Since we already have the <form> tag in myForm variable it is easy to reference / read the tags inside it using myForm.name which directly points me to the tag with id “name”.

Let’s examine myForm.name.value. The value here is the text object property (Read more about text object properties). Every tag have properties some common some are more specific to each tag. This property helps the JavaScript to read the value inputed by the user and finally checks it aganist empty charcter or null using ==”” and similarly does the same thing with all the specifed tags inside the form.

But when it comes to <select> tag the property is different as I’ve previously mentioned. Here the user cannot type anything he will have to choose form the options provided. So we don’t have the value property for <select> tag. All the options in the select tag are indexed starting from 0. This is the reason we check for selectedIndex == 0. If the index value is 0 it means that user didn’t select anything.

So the function checks all the conditions through if and returs true or false. When all the fields are filled it will return true and alows the form to submit or it will return false and alerts the user to re-fill all the fields.

Click here to download the complete code.

Good Luck!

Advertisements

2 thoughts on “Basic: Form Validation using JavaScript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s