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