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!!

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:TwitterFacebookGoogle Plus

42 Responses to “Simple JavaScript Form Validation”

  1. Devin R. Olsen navin israni says:

    really simple explanation!! very nice…it almost felt I am attending a lecture by Prof. Devin Olsen :D

  2. Devin R. Olsen subash says:

    Its very useful beginer . thank you devin

  3. Devin R. Olsen usagi-chan says:

    Fantastic! Just what I was looking for. Thank you so much. :)

  4. Devin R. Olsen prakash says:

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

  5. Devin R. Olsen Marion Ayala says:

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

  6. Devin R. Olsen 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…

  7. Devin R. Olsen 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?

  8. Devin R. Olsen Solange says:

    Thanks for your support, i love your article for beginners. I never comment on those blogs, even when the content is great

  9. Devin R. Olsen crystal says:

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

  10. Devin R. Olsen caspersky says:

    its good

  11. Devin R. Olsen 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

  12. Devin R. Olsen Adam says:

    How do you get it to load the comment?

  13. Devin R. Olsen Adam says:

    Well, I’m testing it

  14. Devin R. Olsen mustajab says:

    Wow! It’s really very good…

  15. Devin R. Olsen amanuel says:

    a is best

  16. Devin R. Olsen 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.

  17. Devin R. Olsen 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

  18. Devin R. Olsen Shakeel says:

    very nice tutorial Thanks Devin

  19. Devin R. Olsen 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.

  20. Devin R. Olsen 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

  21. Devin R. Olsen 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

  22. Devin R. Olsen 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!

  23. Devin R. Olsen 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?

  24. Devin R. Olsen Devin R. Olsen says:

    I always enjoy feedback from my readers!

Leave a Reply