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

THE BELOW FORM IS NOT A DEMO!!

This Article's Comments.

22
prakash Says:

if i can hide the javascript in the browser…wt u do..In that time java script work or not?! ;)
21
Marion Ayala Says:

Found you on Yahoo, exactly what I was looking for! :)
20
jigar Says:

Hi sweetie, sweet website! I really like this post.. I was curious about this for a long time now. This cleared a lot up for me! Do you have a rss feed that I can add?

Wow! It’s really very good…
19
DIY Makeup Says:

Hi sweetie, sweet website! I really like this post.. I was curious about this for a long time now. This cleared a lot up for me! Do you have a rss feed that I can add?
18
Solange Says:

Thanks for your support, i love your article for beginners. I never comment on those blogs, even when the content is great
17
Devin R. Olsen Says:

I always enjoy feedback from my readers!
16
kami Says:

thaks
but i want to know that, where is this message will send?
i couldnt find any email address in the source
when user push sumbit what happend next?
15
Devin R. Olsen Says:

Hi kami, I assume you are talking about what happens to the data in the above example if all fields are valid and filled with data and you click submit. In this example the data is not being handled by any server side function so you only receive a page refresh as if the data was to be sent off to a server side function. Of course if you are speaking of how to preform a server side function with form data. That would be another tutorial and one that’s coming up very soon!
14
kami Says:

thanks for ur answers
but i wonder if i do this kind of things with clien side method
i mean i want to set an emial address that info send to it
13
santiago Says:

how do you make the message go to your email. Could you email me the code or give me a link to a tutorial plz. Tanks
12
Devin R. Olsen Says:

Casting information to an email address with client side code such as JavaScript is not possible alone. You must also use a server side language such as PHP or ASP to perform a message send from one domain to another.

I don’t have any tutorials here yet but I know there are quite a few out there on PHP’s version.
11
Shakeel Says:

very nice tutorial Thanks Devin
10
Shakeel Says:

Can u please give me some piece of code for Comments same you are using, Name and comment field, and directly publish to website, i dont wana need to have user attentications or making acount and no more checks needed for this comment field.. I shall be greatful to you shakeelakbar1@yahoo.com
9
Devin R. Olsen Says:

Hi Shakeel, I assume you are talking about the comment box I have on all my tutorials. I am using both AJAX and PHP/MySQL to perform the seamless comment posting. I would be more than happy to write up a tutorials on this vs. sending you the code. This way any unanswered questions you or many other might have will be answered in one spot. Please check back here with in the next day or so under tutorials/AJAX.
8
amanuel Says:

a is best
7
m. Says:

.k.n
6
mustajab Says:

Wow! It’s really very good…
5
Adam Says:

Well, I’m testing it
4
Adam Says:

How do you get it to load the comment?
3
Devin R. Olsen Says:

@Adam, this tutorial covers how to do a simple form validation. Meaning it checks to see if form fields are not filled out. This is not a tutorial on how to do a comment box like I have here on the site. Until I release the tutorial on how to do so, you m
2
caspersky Says:

its good
1
crystal Says:

this page is not working – i even used all your work, it does not bring up alerts!