Easy Java Script Form Validation

By Stephen Bucaro

You can use forms on your website to get information from a visitor. However a user might make an error, or forget an entry in a form. Ignorant and malicious users may deliberately enter trash into your form in an effort to break your application. For this reason, you need to perform validation on the forms contents before you process it.

Java Script is ideal for form validation because it can verify the forms contents before it is submitted to the server. Thus a malicious user can mess around with your form all day without causing a denial of service for other users. In this article I will show you how to use Java Script to validate your forms.

The example below is a simple search box form consisting of a text box named "term" and a button named "Search". The onClick event of the Search button passes the form as an argument to a function named "Validate". The Validate function will check the form and, if its okay, submit it to the server.

<form name="search" method="post">
<input name="term" size=15 maxlength=50>
<input type="button" value="Search" onClick="Validate(this.form);">
</form>

The form tag allows you to submit the form using either the POST method or the GET method. The GET method causes the browser to append all data from the submitted form to the URL. We don't want this because the user can then edit the form information directly in the browsers address bar, bypassing the Validate function entirely.

The POST method causes the browser to send all the data from the submitted form in the HTTP header where it is not visible to the user. In this article, I'm not going to go into detail about what to do at the server end for processing the form. But, if for example you were using Active Server Pages (ASP), you would use the Request.QueryString("term") function to retrieve the form data with the GET method.

You would use the Request.Form("term") function to retrieve the form data with the POST method. So the user can play with the address bar URL all they want and your server side application will ignore it.

Below is code for the most basic Validate function. You would place this code in the head section of the Web page containing the form. It only checks for the case of an empty term text box. If the text box is empty it displays a message in a dialog box to the user. If the term text box is not empty, it submits the form to the server.

<script language="JavaScript">

function Validate(form)
{
   if(form.term.value == "")
   {
      alert("Enter a search term");
   }
   else
   {
      form.submit();
   }
}

</script>

This Validate function could be expanded to check the text box for other errors, such as the user entering only spaces. However, as you add code for more checks, the function would become long and complicated. Therefore it is best to design a Validate function that calls other functions for specific procedures. Below is a function that checks if the term text box is empty. Note how it is called by the Validate function.

<script language="JavaScript">

function Empty(field)
{
   if(field == "")
   {
      return(true);
   }
   else
   {
      return(false);
   }    
}

function Validate(form)
{
   var error = 0;

   if(Empty(form.term.value)) error = 1;

   if(error)
   {
      alert("Error");
   }
   else
   {
      form.submit();
   }
}

</script>

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse