In this article we will see how to perform form validation with JavaScript and with html5. In this article I’ll will talk about a new feature of HTML5 which is very useful in creating validations of forms, that is the HTML5 Validator. Since long time the validation of a form field is one thing that has been giving a lot of work for developers. Earlier programmers developed many forms of validation in JavaScript, then with the rise of jQuery validation plugin was used the most. But now with the new HTML5 the things have got much, much easier, because the validation has become something like a native language. In this article I will show you some options on how to perform the validation of a field, either by JavaScript or HTML5 .
Validation Using JavaScript
Let’s start the validation in JavaScript, below we use the following html code. It is a code of a simple form, which we will be sent to validate.
Listing 1 : HTML5 Validator Example Code
<!DOCTYPE html>
<html>
<head>
<title>Forms Validation</title>
</head>
<body>
<form action="actionpage" method="post" name="data" onSubmit="return sendData();" >
<table width="588" border="0" align="center" >
<tr>
<td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Full Name:</font></td>
<td width="460">
<input name="tx_name" type="text" class="formbutton" id="tx_name" size="52" maxlength="150">
</td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">E-mail:</font></td>
<td><font size="2">
<input name="tx_email" type="text" id="tx_email" size="52" maxlength="150" class="formbutton">
</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">Message<strong>:</strong></font></font></td>
<td rowspan="2"><font size="2">
<textarea name="tx_message" cols="50" rows="8" class="formbutton" id="tx_message" input ></textarea>
</font></td>
</tr>
<tr>
<td height="85"><p><strong><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">
</font></font></strong></p></td>
</tr>
<tr>
<td height="22"></td>
<td>
<input name="Submit" type="submit" class="formobjects" value="sendData">
<input name="Reset" type="reset" class="formobjects" value="redefine">
</td>
</tr>
</table>
</form>
</body>
</html>
This is our form, which will be displayed as shown in Figure 1.
Figure 1 : Appearance of the form
Now we need to use JavaScript to validate these fields.
Listing 2 : Code JavaScript Validation
<!DOCTYPE html>
<html>
<head>
<title>Forms Validation</title>
<script language="JavaScript" >
function sendData(){
if(document.data.tx_name.value=="" || document.data.tx_name.value.length < 8)
{
alert( "Fill the Name field correctly!" );
document.data.tx_name.focus();
return false;
}
if( document.data.tx_email.value=="" ||
document.data.tx_email.value.indexOf('@')==-1 ||
document.data.tx_email.value.indexOf('.')==-1 )
{
alert( "Fill the E-MAIL field correctly!" );
document.data.tx_email.focus();
return false;
}
if (document.data.tx_message.value=="")
{
alert( "Enter some Message!" );
document.data.tx_message.focus();
return false;
}
if (document.data.tx_message.value.length < 50 )
{
alert( "Message should be atleast 50 characters!" );
document.data.tx_message.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form action="actionpage" method="post" name="data" onSubmit="return sendData();" >
<table width="588" border="0" align="center" >
<tr>
<td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Full Name:</font></td>
<td width="460">
<input name="tx_name" type="text" class="formbutton" id="tx_name" size="52" maxlength="150">
</td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">E-mail:</font></td>
<td><font size="2">
<input name="tx_email" type="text" id="tx_email" size="52" maxlength="150" class="formbutton">
</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">Message<strong>:</strong></font></font></td>
<td rowspan="2"><font size="2">
<textarea name="tx_message" cols="50" rows="8" class="formbutton" id="tx_message" input ></textarea>
</font></td>
</tr>
<tr>
<td height="85"><p><strong><font face="Verdana, Arial, Helvetica, sans-serif"><font size="1">
</font></font></strong></p></td>
</tr>
<tr>
<td height="22"></td>
<td>
<input name="Submit" type="submit" class="formobjects" value="sendData">
<input name="Reset" type="reset" class="formobjects" value="redefine">
</td>
</tr>
</table>
</form>
</body>
</html>
After we put this code we will validate our form, for example leave the name field blank, it will show the following message:
Figure 2 : Validation Results
Thus our form is being validated, so simple and easy, but with a code rather large, as we can see.
Validating With HTML5
With the arrival of the new version of HTML, in addition to many other improvements, we can now validate a field without writing a lot of code, making the work of developers much more convenient and easy. In the list below you will see that you can do the same as the previous example of a much easier way and practice writing a lot less code.
Listing 3 : Validating form with HTML5
<! DOCTYPE html>
<html>
<head>
<title> Forms Validation - Code Line </ title>
</head>
<body>
<form method="post" action="">
<label for="nome"> Name: </ label>
<input id="nome" type=text required name=nome/>
<br />
<label for="email"> Email: </ label>
<input id="email" type=text required name=email/>
<input type=submit value="OK"/>
</form>
</body>
</html>
Do not forget to use HTML5 features that we need to put the doctype referring to HTML5 language. In the above example what we have used is equivalent of HTML5 version.
<!DOCTYPE html>= “HTML5”. This goes at the top of every page.
As we can see, much less code is written compared to the previous code, and in the following image we can see that the result is the same validation as with JavaScript.
Figure 3 : Results of validation in HTML5
Summary
I hope it was clear these two types of form validation, we found that in addition to using the old JavaScript, you can use new HTML5 to perform the same function with less code. Hope you like the article, leave your comments and suggestions here.
Introduction to Ext JS