Validation in HTML5 Using Regular Expressions

Introduction

This is a simple application for beginners that shows how to create validation for TextBoxes using HTML5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop validation on Textbox applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Code is an important tag of a HTML 5 that is used to write a regular expression in a HTML 5 application. I hope this article helps to create various types of validation on a different Textboxes using HTML5 and CSS tools. Regular expression is a mathematics tools that is used to set a validation. 

Step 1 : First open a HTML editor such as Notepad.

• Open start->Notepad.
• The name of editor is "Demo".

Step 2 : Create a Folder on a desktop.

• Right-click on desktop->new->Folder.
• Name of folder is "Tom".

Step 3 : Open Visual Studio.

• Go to file -> New->Projects.
• Crete an ASP. NET Web Application.
• Name of "Validation.aspx".

Step 4 : Add a HTML file to your web application.

• Right-click on Solution Explorer.
• Add->add new item->HTML form.
• The Name of the HTML form is "Textvalidation.html".

Step 5 : Now in this step we apply a style of on a form. Now we set a font, margin, padding, height and width of a form. Now we also set a code font family, label color, display, text aliment and padding of a button.

Code

<style>

  html
   {

    font-family:Verdana;

    font-size:1.5em;

   }

   code {font-family:Courier New, Courier, monospace; font-size:1em; color:blue; padding-left:10px;}

   h1
    {

    color:#5999DE;

    }

   form {

    font:100% Lucinda Grande, Sans-serif;

    margin: 0;

    padding: 0; 

    width: 200%;

    border:1px solid #ccc;

    padding: 10px;

    height: 539px;

   }

  .entry
    {

   margin-bottom:.5em; display:table-row;

    }

  label
   {

   color:#666666;

   display:table-cell;

   text-align: right;

     }

  input, textarea
    {

    margin-left:10px;

    display:table-cell;

      }

  .button
      {

     padding-left:140px;

     padding-bottom:5px;

     padding-top:5px;

      }

  input:required
   {

  outline: 1px red solid;

  color:red;

     }

  #form11 {width:500px;}

</style>

Step 6 : Now in this step we set the content, color and set a regular expression used on a HTML5.

 

Code

<form>

   <div class="entry" style="background-color: #FF6699">

   <label for="f-1">Name</label>

   <input id="f-1" name="haha" required>

   </div>

   <div class="entry" style="background-color: #FF6699">

   <label for="f-1a">Email</label>

   <input id="f-1a" name="mail" type=email>

   </div>

   <div class=entry style="background-color: #FF6699">
   <label for=f-2>Title</label>
   <input id=f-2   list=mylist type=text>

   <datalist id=mylist>

   <option label=Mr value=Mr>

   <option label=Ms value=Ms>

   <option label=Prof value="Mad Professor">

   </datalist> <code>datalist</code>

   </div>

   <div class=entry style="background-color: #FF6699">

   <label for=f-4>Age</label>

   <input id=f-4  name=shoesize type=number min=18 max=25>

   <code style="background-color: #FF6699">number  min=18 max=25</code>

   </div>

   <div class=entry style="background-color: #FF6699">

   <label for=f-7>Date of Birth</label>

   <input id=f-7  name=dob type=date><code>date</code>

   </div>

   <div class=entry style="background-color: #FF6699">

   <label for=f-8>Attractiveness</label>

   <input id=f-8  name=tap type=range min=1 max=11 value=1>

   <output name=result  onforminput=value=tap.value>1</output><code>range</code>

   </div>

   <div class=entry style="background-color: #FF6699">

   <label for=form11>Part I.D.</label>

   <input id="f11" name="part" pattern="[0-9][A-Z]{3}"

    placeholder="Digit followed by three uppercase letters."> <code>[0-9][A-Z]{3}</code>

   </div>

   <div class=button>

   <button type=submit>Send</button>

   </div>

</form>

Step 7 : The following image shows the complete application.

 

Step 8 : Now in this step we used the HTML5 tags <code> and <output>.The <code> tag is used to write a regular expression and the <output> tag is used to display a message.

 

Code

 

 <input id="f-1" name="haha" required>
 <input id="f-1a" name="mail" type=email>
 <input id=f-2   list=mylist type=text>

 <input id=f-4  name=shoesize type=number min=18 max=25>

 <code style="background-color: #FF6699">number  min=18 max=25</code>
 <input id=f-7  name=dob type=date><code>date</code>

 <input id=f-8  name=tap type=range min=1 max=11 value=1>

 <output name=result  onforminput=value=tap.value>1</output><code>range</code>

 <input id="f11" name="part" pattern="[0-9][A-Z]{3}"

 placeholder="Digit followed by three uppercase letters."> <code>[0-9][A-Z]{3}</code>

Step 9 : The complete code of a text box validation application is given below.

 

Code

<html>
  <head>
  <title>Tom application</title>

  <style>

   html
   {

    font-family:Verdana;

    font-size:1.5em;

   }

   code {font-family:Courier New, Courier, monospace; font-size:1em; color:blue; padding-left:10px;}

   h1
    {

    color:#5999DE;

    }

   form {

    font:100% Lucinda Grande, Sans-serif;

    margin: 0;

    padding: 0; 

    width: 200%;

    border:1px solid #ccc;

    padding: 10px;

    height: 539px;

   }

  .entry
    {

   margin-bottom:.5em; display:table-row;

    }

  label
   {

   color:#666666;

   display:table-cell;

   text-align: right;

     }

  input, textarea
    {

    margin-left:10px;

    display:table-cell;

      }

  .button
      {

     padding-left:140px;

     padding-bottom:5px;

     padding-top:5px;

      }

  input:required
   {

  outline: 1px red solid;

  color:red;

     }

  #form11 {width:500px;}

 </style>
 <form>

   <div class="entry" style="background-color: #FF6699">

   <label for="f-1">Name</label>

   <input id="f-1" name="haha" required>

   </div>

   <div class="entry" style="background-color: #FF6699">

   <label for="f-1a">Email</label>

   <input id="f-1a" name="mail" type=email>

   </div>

   <div class=entry style="background-color: #FF6699">
   <label for=f-2>Title</label>
   <input id=f-2   list=mylist type=text>

   <datalist id=mylist>

   <option label=Mr value=Mr>

   <option label=Ms value=Ms>

   <option label=Prof value="Mad Professor">

   </datalist> <code>datalist</code>

   </div>

   <div class=entry style="background-color: #FF6699">

   <label for=f-4>Age</label>

   <input id=f-4  name=shoesize type=number min=18 max=25>

   <code style="background-color: #FF6699">number  min=18 max=25</code>

   </div>

   <div class=entry style="background-color: #FF6699">

   <label for=f-7>Date of Birth</label>

   <input id=f-7  name=dob type=date><code>date</code>

   </div>

   <div class=entry style="background-color: #FF6699">

   <label for=f-8>Attractiveness</label>

   <input id=f-8  name=tap type=range min=1 max=11 value=1>

   <output name=result  onforminput=value=tap.value>1</output><code>range</code>

   </div>

   <div class=entry style="background-color: #FF6699">

   <label for=form11>Part I.D.</label>

   <input id="f11" name="part" pattern="[0-9][A-Z]{3}"

    placeholder="Digit followed by three uppercase letters."> <code>[0-9][A-Z]{3}</code>

   </div>

   <div class=button>

   <button type=submit>Send</button>

   </div>

  </form> 

 </body>

</html>

Step 10 :  Press Ctrl + F5 run application on a browser.

 

 Click on the send button to show a name field validation.

After entering a name in the name field click the send button to show an email fields validation.

After filling in all fields they show a port id validation because the entry is not match for the range.

Here is some other useful resources which may help you.

• Formula Generator - A Regular Expression Generator Class in C# and .NET
• Regular Expressions Example
• Error Provider in C#
• Regular Expressions To Validate an ASP. NET Form Using JQuery