You can use forms on your website to get information from the visitor. However a user might make an error, or forget and entry in a form. Ignorant and malicious users may deliberately enter trash into your form in an effort to break your application.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Form Validation

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 RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268