Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to make form validations in Javascript and HTML5

In this article we will see how to perform forms validations with javascript and with html5.

Hello guys, in this article we will talk about a new feature of HTML5 that is very useful in creating validations forms, is the HTML5 Validator.

Long ago the validation of a form field is one thing that has been giving a lot of work for developers, programmers have developed many forms of validation in javascript, then with the rise of jQuery the validation plugin appeared, but now with the new HTML5 the things got much, much easier, because the validation has become something native in the HTML5 language.

In this article I will show you some options on how to perform validation of a field, either by javascript or HTML5.

Let's start with validation in javascript, below we use the following html code, a code is a simple form, which will not be sent to validate without writing anything.

Listing 1: HTML Code

<html>
<head>
    <title>HTML 5 Validation Form - MrBool Tutorial</title>
     
     
</head>
<body>
 
<form action="actionpage" method="post" name="dataform" onSubmit="return send();" >  <table width="588" border="0" align="center" >
    <tr>
      <td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">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="Send">
  
        <input name="Reset" type="reset" class="formobjects" value="Reset">
      </td>
    </tr>
  </table>
</form>   
 
</body>
</html>

This is our form, to be displayed as shown in figure 1.

Form Appearance

Figure 1: Form Appearance

Now we need to use Javascript to validate these fields. What we want to happen is it impossible to send the form data with any empty field, so it will use a javascript code to do this.

With the javascript code, our code will be like this.

Listing 2: Javascript Code Validation

<html>
<head>
    <title>HTML 5 Validation Form - MrBool Tutorial</title>
     
     <script type="text/javascript">

function send(){
  
if(document.dataform.tx_name.value=="" || document.dataform.tx_name.value.length < 8)
{
alert( "Insert your name with more than 8 chars!" );
document.dataform.tx_name.focus();
return false;
}
  
  
if( document.dataform.tx_email.value=="" || document.dataform.tx_email.value.indexOf('@')==-1 || document.dataform.tx_email.value.indexOf('.')==-1 )
{
alert( "Insert an valid e-mail adress!" );
document.dataform.tx_email.focus();
return false;
}
  
if (document.dataform.tx_message.value=="")
{
alert( "Insert your message!" );
document.dataform.tx_message.focus();
return false;
}
  
if (document.dataform.tx_message.value.length < 50 )
{
alert( "Is necessary to use more than 50 chars in the message field!" );
document.dataform.tx_message.focus();
return false;
}
  
return true;
}
  


     </script>
</head>
<body>
 
<form action="#" method="post" name="dataform" onSubmit="return send();" >
  <table width="588" border="0" align="center" >
    <tr>
      <td width="118"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">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="Send">
  
        <input name="Reset" type="reset" class="formobjects" value="Reset">
      </td>
    </tr>
  </table>
</form>   
 
</body>
</html>

After we put this code, our form will validate, for example if we leave the name field blank, it displays the following message:

Validation Result

Figure 2: Validation Result

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 having to write much code, making developers life much more convenient and easy.

In the listing below we will see that you can do the same from the previous example of a much easier way and practice writing much less code.

Listing 3: Validating form with HTML5

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>HTML 5 Validation Form - MrBool Tutorial</title>
     
</head>
<body>
 
<form method="post" action="">
    <label for="name">Name: </label>
    <input id="name" type=text required name=name/>
<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 resources we need to put the html5 doctype for the language.

Listing 4: Doctype html5

<!DOCTYPE html>

As we can see, we wrote much less code and in the image below you can see what the result is the same validation with javascript.

HTML5 Validation

Figure 3: HTML5 Validation

Note.: The validation text is in Portuguese because my personal computer is in Portuguese, the text displayed is the same of: This field is required.

I hope it was clear these two forms of form validation, we saw that besides using the old javascript, you can use new technology (html5) to perform the same function and writing much less code.

You can download the full source code of both, if you want to see the DEMO example, please click in these link:

Feel free to choose which one to use and which will suit most needs.

I hope you enjoyed, until the next time.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login