Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
How To Validate Forms with Javascript
This tutorial will show you one way to validate forms using javascript.
What is form validation?
Form validation is the process of checking that a form has been filled in to a set of specifications before it is processed. For example, if you specify that no field be left blank, the form validation will check that no fields are left blank before it is processed.
Server-side or Client-side validation
There are 2 main methods of validating forms: server-side or client side. Server-side form validation is done by using something such as PHP, ASP, CGI scripts, etc. Client-side form validation is usually done using javascript. A combination of both, client-side and server-side is usually best.
The form below is a working example of the form with client-side form validation using javascript. It is the form that will be created in this tutorial. Javascript is used to validate that all of the fields have a minimum of 2 characters in the text fields.
Leave a text field empty or enter only 1 character and an alert box will notify to fill in the blank field.
The javascript and (X)HTML code below is the code for the form above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<script type="text/javascript" language="javascript" src="myjavascript.js>
function validate()
{
if (document.formname.name.value.length < 2)
{
alert("Please enter your name");
return false;
}
if (document.formname.email.value.length < 2)
{
alert("Please enter your email")
return false;
}
return true;
}
</script>
<form action="myscript.php" name="formname" method="post" onSubmit="return validate();">
Name:
<input type="text" name="name" />
<br />
Email:
<input type="text" name="email" />
<br />
<input type="submit" name="submit" />
</form>
</body>
</html>
First I will explain the form.
To create the form, the openning <form> and closing </form> tags are used.
<form>
</form>
The form is given the attribute "name" with the value of "formname", so that javascript can reference the form by name.
<form name="formname">
</form>
The form has the "method" attribute with a value of "post". This will specify how the data that is entered into the form will be sent.
<form name="formname" method="post">
</form>
The "action" attribute will specify the location and name of the script that will process the data and where it is located. In this example, the name of the script is "myscript.php".
<form name="formname" method="post" action="myscript">
</form>
The openning <form> tag also includes an "onSubmit" attribute to call the javascript validation function, "validate()". The validate() function will check the data in each of the fields when the submit button is pressed.
<form name="formname" method="post" action="myscript" onSubmit="return validate();">
</form>
The form has 2 text fields with the names "name" and "email".
<form name="formname" method="post" action="myscript" onSubmit="return validate();">
Name:
<input type="text" name="name" />
<br />
Email:
<input type="text" name="email" />
<br />
</form>
The form has a submit button with a name of "submit".
<form name="formname" method="post" action="myscript" onSubmit="return validate();">
Name:
<input type="text" name="name" />
<br />
Email:
<input type="text" name="email" />
<br />
<input type="submit" name="submit" />
</form>
Now I will explain the javascript code.
The openning <script> and closing </script> tags tell the web browser that that the code within the tags will be javascript.
<script type="javascript" type="text/javascript">
</script>
The form validation function, validate(), will check the data in each of the fields when the submit button is pressed.
<script type="javascript" type="text/javascript">
function validate()
{
}
</script>
The if statements, (if (document.formname.name.value.length < 2)), tells the javascript if the condition specified is not met, to display an alert box (alert("Please enter your name")) and to return false. If false is returned, the data in the form will not be sent.
<script type="javascript" type="text/javascript">
function validate()
{
if (document.formname.name.value.length < 2)
{
alert("Please enter your name");
return false;
}
if (document.formname.email.value.length < 2)
{
alert("Please enter your email")
return false;
}
</script>
If all conditions are met, javascript returns true, and the data in the form is sent.
<script type="javascript" type="text/javascript">
function validate()
{
if (document.formname.name.value.length < 2)
{
alert("Please enter your name");
return false;
}
if (document.formname.email.value.length < 2)
{
alert("Please enter your email")
return false;
}
true
}
</script>