Simple JavaScript Form Validation
Today I wanted to write a quick demonstration of how to do a very simple client side form validation.
There are two types of form validation, server-side and client side, today we will cover client side validation with JavaScript.
Example of simple form validation (Click Submit)
Ok lets start with a blank document:
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Form Validation</title> </head> <body> </body> </html>
In your body tags add the following simple form:
<form action="http://www.devinrolsen.com/" method="post" onsubmit="return validate();" name="simpleForm">
<label>First Name:</label>
<input type="text" name="firstName" /><br />
<label>Last Name:</label>
<input type="text" name="lastName" />
<br />
<br />
<label>Comment:</label>
<br />
<textarea rows="8" cols="64" name="message"></textarea>
<br />
<br />
<input type="submit" value="Submit" style="margin-left:345px;" />
</form>
Ok first thing to point out with our simple form is that the form tag its self. The form tag has a on submit event of “return validate();” that is awaiting the return of either true or false from the function validate().
The second thing I would like to point out is that we gave our form a name of “simpleForm”. We give our form a name so that we can reference to it much quicker in our JavaScript “validate()” function that we will cover here in a second.
Moving onto the actual JavaScript, add the following to your documents header tags:
<script type="text/javascript">
function validate()
{
if()
{
}
}
</script>
Great, here we are forming our validate() function and in this function we are going to create a simple condition that checks each of our form fields to validate if their values are empty or not.
Lets point to our first form element like so:
<script type="text/javascript">
function validate()
{
if(document.simpleForm.firstName.value == "")
{
}
}
</script>
We first point to our document, then to the name of our form “simpleForm”, and then to the name of our first form element “firstName”. Once we are pointing to the first form element, we check its value to see if indeed its value is empty or not (== “”).
Its that simple!
Now lets point to the other two form elements (lastName and message) to bring validation them as well. We can extend our conditional statement to the rest of our form elements by using whats called “Logical Operators” like so:
<script type="text/javascript">
function validate()
{
if(document.simpleForm.firstName.value == "" ||
document.simpleForm.lastName.value == "" ||
document.simpleForm.message.value == "")
{
}
}
</script>
Notice how we are using the “||” between each form elements we point to? Basically we are saying “if firstName element value is equal to empty, OR (||) lastName element is equal to empty, OR (||) message element is equal to empty, then do the following”.
By using the “||” OR logical operators we can extend our condition to as many form elements as we like. There are more logical operators that you can read about here.
Great so now that we have extended out validation condition to check our three elements value’s, lets move on to the part of the function that cancels the form from being submitted if indeed one or more form element is empty like so:
function validate(){
if(document.simple_form.firstName.value == "" ||
document.simple_form.lastName.value == "" ||
document.simple_form.message.value == "")
{
alert("Please fill out all fields before clicking submit!");
return false;
}
}
The first thing we want to do is inform the user that we must have all form elements filled out before it will be submitted. We do this by using the JavaScript altert to send our reminder to the user. Next we use “return false;” after altering our message to stop the form submitting and allow the user to correct their error.
And that’s it!
So with our simple condition we have pointed to each of our forms elements and peeked at its value. If the value of any of our form elements is equal to empty or rather nothing, we begin to alert a reminder to the user and halt the form from submitting to allow the user to correct the error. If all form fields pass our simple validation condition then our form continues to submit as normal.
Thanks everyone.
Devin R. Olsen
