Ad

Monday, June 09, 2008

Creating a Simple HTML Form Validation System Using JavaScript

OK, so today we are going to create a simple Form Validator Script using JavaScript that would not let a HTML form be submitted unless all required field are filled in. JavaScript is widely used for this purpose as it does not need server processing hence no form sending and pageload is required.

When you are using data submission via form on your website there are a few other methods that you can employ other than JavaScript; first, not to use validation at all (NOT RECOMMENDED), second, to use validation in the script and make it show appropriate message (need pageload).

So definitely we’ll be using JavaScript and you should in most cases, too. Let’s kick off guys!

Now before we begin I want to tell you one thing, we will only be checking (validating) if all the required fields are filled or not and NOT whether what is filled in is acceptable. Of course we can use JavaScript to validate whether, let’s say the filled email address is appropriate or not but that would be the topic of some future posts.

So for now we just need to check all the required fields of the form to see if they are filled in or not. Suppose if we have a form (named "form") with four Input Boxes (namely ‘Name’,, ‘Address’, ‘Email’, ’PhoneNumber’), we can use the following piece of JavaScript code to check them:


  if(form.Name.value=='')
    alert("Name field is required. Please fill it in.");

  if(form.Address.value=='')
    alert("Address field is required. Please fill it in.");

  if(form.Email.value=='')
    alert("Email field is required. Please fill it in.");

  if(form.PhoneNumber.value=='')
    alert("Phone Number field is required. Please fill it in.");

Since form elements reside between the <form></form> tags, we would wrap the above code as a JavaScript function and make the form invoke it when ‘Submit’ button is pressed.


  <html>
  <head>

  <title>JavaScript Form Validation Script</title>

  
  <script language="JavaScript" type="text/JavaScript">

  function checkForm(thisform)
  {
    if(thisform.Name.value=='')
    {
      alert("Name field is required. Please fill it in.");
      return false;
    }
    if(thisform.Address.value=='')
    {
      alert("Address field is required. Please fill it in.");
      return false;
    }
    if(thisform.Email.value=='')
    {
      alert("Email field is required. Please fill it in.");
      return false;
    }
    if(thisform.PhoneNumber.value=='')
    {
      alert("Phone Number field is required. Please fill it in.");
      return false;
    }
    //if all is OK submit the form

    thisform.submit();
  }
  </script>


  </head>

  <body>
  <form name="form1" id="form1" method="post" action="--SCRIPT.PHP--">

    <table width="500" border="0" cellspacing="0" cellpadding="0">
      <tr>

        <td width="121">Name</td>
        <td width="379"><input name="Name" type="text" id="Name" /></td>

      </tr>
      <tr>
        <td>Address</td>
        <td><input name="Address" type="text" id="Address" /></td>

      </tr>
      <tr>
        <td>Email</td>
        <td><input name="Email" type="text" id="Email" /></td>

      </tr>
      <tr>
        <td>Phone Number</td>
        <td><input name="PhoneNumber" type="text" id="PhoneNumber" /></td>

      </tr>
      <tr>
      <!--This is NOT a Submit (type) Button which automatically submits the form on click, rather we are using
          Simple Button and the JavaScript code to submit it -->
        <td><input name="Submit" type="button" id="Submit" onclick="checkForm(this.form)" value="Submit" /></td>

        <td>&nbsp;</td>
      </tr>
    </table>
  </form>
  </body>

  </html>

In the above code, instead of hard coding the form’s name (or object name) in the function ‘checkForm’ we are passing it from the form. When any form elements is found to be empty respective message is shown via the Message Box (using alert() ).

To use the above code (JavaScript function) with your existing forms, you’d need to make some changes to the function regarding the name and number of form elements you want to validate. You’d also have to change the Message (alert) shown, if required.

One last thing, if the user has turned off Java Script or their browser does not support it, form would not be validated and you might end up receiving half-filled information for this scenario you could employ double validation using both JavaScript and server-side (in the script data is getting sent to). Of course it’s very unlikely but you should be ready for everything.

Previous Posts:

10 comments:

  1. I am a big fan of your blog. your article are of high caliber but easy to understand. Keep on writing

    ReplyDelete
  2. Anonymous11:30 AM

    bitch

    ReplyDelete
  3. JavaScript is a good program and very easy to use. I don´t like a complex program. I prefer javascript because i consider it like a device very eficient and it have a good quality.
    I always looking for the quality that is why i prefer to buy viagra because i always have a great result in my sexual life.

    ReplyDelete
  4. Anonymous10:09 PM

    Thanks for the help.... :)

    ReplyDelete
  5. Hey im a junior in high school and am just getting started with computer programming. I started off taking simple classes such as ALICE, which is a type of simple software. I also to Intro to C++, and i am taking Visual Basic Express right now, next year I plan to take Java. Any advice?

    ReplyDelete
  6. So definitely we’ll be using JavaScript and you should in most cases, too. Let’s kick off guys!

    ReplyDelete
  7. Anonymous10:05 AM

    nice

    ReplyDelete
  8. please i need to know what all criteria did u accomplish to enable adsense in ur blog ????

    ReplyDelete
  9. Super.. Excellent..... nice ...i search lot of sites to know about the validation by using java script... among all the sites this is very useful to me...... thank you for blog .... keep blogging

    ReplyDelete
  10. Anonymous10:31 AM

    I LIKE IT... I WAS GETTING PROBLEM TO UNDERSTAND JAVASCRIPT .. BUT NOW I GOT IT .. THANKS

    ReplyDelete

You are free to comment anything, although you can comment as 'Anonymous' it is strongly recommended that you supply your name. Thank You.

Please don't use abusive language.