Javascript Programming: Form Validation

Validating your form using Javascript is a very good idea. This ensures that all required data is being sent and that it is in a format that the web application server can understand. You could validate the data on the server, but this requires passing the data back and forth between client and server until it is properly completed. I recommend using JavaScript to first validate your form and then, as a precaution, run a second form of validation using the application server.

Example
Here is a pretty good example of JavaScript being used for form validation. Give it a try!

The example above is pretty heavy duty, and although I'd like to walk you through the code step by step, it can be a bit overwhelming. So, let's work on a more basic example.

Let's assume we want to create a text field that the user will enter some information into, like their name or address. Then, when they click submit, we want to ensure that they at least typed something before that data gets sent on to the web server for potential storage in our database.

Step 1. Create Our Basic Form - Before we can validate any data, we need to create our form. Here is the code:

<font size="-1"><form action="" method="get" name="myForm"><br />
  First Name: <input name="firstname" type="text"><br />
  <input name="" type="submit" value="Submit"><br />
</form></font>

Here is the form the code above creates. You will notice that there is no additional JavaScript added yet to handle the validation.
Step 2. Create the Submit Event - What we need to do next is to create an event handler that will allow us to check to ensure the user has entered some information. The handler we will use is called onSubmit and it is simi liar to the onMouseDown event you looked at earlier with DHTML. What onsubmit will do will call a function we will create in step 3 that will validate the information in the form. Here is the addition to the code we had earlier in bold:

<form action="" method="get" name="myForm" onsubmit="validateMyForm(this)"><br />
  First Name: <input name="firstname" type="text"><br />
  <input name="" type="submit" value="Submit"><br />
</form>

Here is our form again, with the added code. Go ahead and click Submit. You should get an error message (as long as you have show script errors turned on in the options for your browser).

The reason you get this error is that you are telling the browser to run the function called validateForm, which it can not do as we have not created the function yet. That is our next piece.

Step 3. Create the Function for the Submit Event - One thing we had not looked at yet was the creation of a function in JavaScript. A function is a specific series of instructions that can be carried out under a given circumstance or user event. A function can be reused, meaning, you can call on it to perform its instructions as required whenever you may need to. In this case we'll create a function that will check to ensure the user has entered information in the text field whenever they click the submit button. Clicking on the submit button will submit the form and call the onSubmit handler we added to be executed.

Here is the code for our function. We could add it anywhere in the document, as long as it is placed somewhere so it will load before the user has a chance to click the submit button. Typically though, functions are placed in the head portion of our HTML document structure.

<script>

	function validateMyForm() {
		if (myForm.firstname.value==""){
			alert("Please enter your first name!");
		}

		else {
			myForm.submit();
		}
	}

</script>

Now, when the user hits submit, the function above is executed and the lines of JavaScript code are ran through. The first line is the name of the function. Next, we have an if statement that checks to see if the value of the firstname field of our form is empty. If it is, it calls an alert method with a message to the user. Otherwise, the form is submitted normally.

Here is a working example of the finished form. Example 1

This is a pretty simple example. For more complicated validations, like in the example above, we can count the number of characters a user may have entered and determine if the characters are letters or numbers. For things like email addresses, we can check for occurences of the @ symbol and ensure they have placed a . in the correct place and even if they have used a correct extension like .com or .ca.

created: 2006-11-05