Post
Ask Question

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 an HTML 5 that is used to write a regular expression in an HTML 5 application. I hope this article helps to create various types of validation on a different Textboxes using HTML5 and CSS tools. A regular expression is a mathematics tool that is used to set a validation. 
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "Demo".
wakakakakak.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Tom".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Validation.aspx".
new.gif
 
webapplication.gif
 
Step 4: Add an 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".
html.gif
 
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
  1. <style>  
  2.   html  
  3.    {  
  4.     font-family:Verdana;  
  5.     font-size:1.5em;  
  6.    }  
  7.    code {font-family:Courier New, Courier, monospace; font-size:1em; color:blue; padding-left:10px;}  
  8.    h1  
  9.     {  
  10.     color:#5999DE;  
  11.     }  
  12.    form {  
  13.     font:100% Lucinda Grande, Sans-serif;  
  14.     margin: 0;  
  15.     padding: 0;   
  16.     width: 200%;  
  17.     border:1px solid #ccc;  
  18.     padding: 10px;  
  19.     height: 539px;  
  20.    }  
  21.   .entry  
  22.     {  
  23.    margin-bottom:.5em; display:table-row;  
  24.     }  
  25.   label  
  26.    {  
  27.    color:#666666;  
  28.    display:table-cell;  
  29.    text-align: right;  
  30.      }  
  31.   input, textarea  
  32.     {  
  33.     margin-left:10px;  
  34.     display:table-cell;  
  35.       }  
  36.   .button  
  37.       {  
  38.      padding-left:140px;  
  39.      padding-bottom:5px;  
  40.      padding-top:5px;  
  41.       }  
  42.   input:required  
  43.    {  
  44.   outline: 1px red solid;  
  45.   color:red;  
  46.      }  
  47.   #form11 {width:500px;}  
  48. </style> 
Step 6: Now in this step we set the content, color and set a regular expression used on an HTML5.
 
Code
  1. <form>  
  2.    <div class="entry" style="background-color: #FF6699">  
  3.    <label for="f-1">Name</label>  
  4.    <input id="f-1" name="haha" required>  
  5.    </div>  
  6.    <div class="entry" style="background-color: #FF6699">  
  7.    <label for="f-1a">Email</label>  
  8.    <input id="f-1a" name="mail" type=email>  
  9.    </div>  
  10.    <div class=entry style="background-color: #FF6699">  
  11.    <label ffor=f-2>Title</label>  
  12.    <input id=f-2   list=mylist type=text>  
  13.    <datalist id=mylist>  
  14.    <option label=Mr value=Mr>  
  15.    <option label=Ms value=Ms>  
  16.    <option label=Prof value="Mad Professor">  
  17.    </datalist> <code>datalist</code>  
  18.    </div>  
  19.    <div class=entry style="background-color: #FF6699">  
  20.    <label ffor=f-4>Age</label>  
  21.    <input id=f-4  name=shoesize type=number min=18 max=25>  
  22.    <code style="background-color: #FF6699">number  min=18 max=25</code>  
  23.    </div>  
  24.    <div class=entry style="background-color: #FF6699">  
  25.    <label ffor=f-7>Date of Birth</label>  
  26.    <input id=f-7  name=dob type=date><code>date</code>  
  27.    </div>  
  28.    <div class=entry style="background-color: #FF6699">  
  29.    <label ffor=f-8>Attractiveness</label>  
  30.    <input id=f-8  name=tap type=range min=1 max=11 value=1>  
  31.    <output name=result  onforminput=value=tap.value>1</output><code>range</code>  
  32.    </div>  
  33.    <div class=entry style="background-color: #FF6699">  
  34.    <label for=form11>Part I.D.</label>  
  35.    <input id="f11" name="part" pattern="[0-9][A-Z]{3}"  
  36.     placeholder="Digit followed by three uppercase letters."> <code>[0-9][A-Z]{3}</code>  
  37.    </div>  
  38.    <div class=button>  
  39.    <button type=submit>Send</button>  
  40.    </div>  
  41. </form> 
body1.gif
 
Step 7: The following image shows the complete application.
 
body2.gif
 
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
  1. <input id="f-1" name="haha" required>  
  2.  <input id="f-1a" name="mail" type=email>  
  3.  <input id=f-2   list=mylist type=text>  
  4.  <input id=f-4  name=shoesize type=number min=18 max=25>  
  5.  <code style="background-color: #FF6699">number  min=18 max=25</code>  
  6.  <input id=f-7  name=dob type=date><code>date</code>  
  7.  <input id=f-8  name=tap type=range min=1 max=11 value=1>  
  8.  <output name=result  onforminput=value=tap.value>1</output><code>range</code>  
  9.  <input id="f11" name="part" pattern="[0-9][A-Z]{3}"  
  10.  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
  1. <html>  
  2.   <head>  
  3.   <title>Tom application</title>  
  4.   <style>  
  5.    html  
  6.    {  
  7.     font-family:Verdana;  
  8.     font-size:1.5em;  
  9.    }  
  10.    code {font-family:Courier New, Courier, monospace; font-size:1em; color:blue; padding-left:10px;}  
  11.    h1  
  12.     {  
  13.     color:#5999DE;  
  14.     }  
  15.    form {  
  16.     font:100% Lucinda Grande, Sans-serif;  
  17.     margin: 0;  
  18.     padding: 0;   
  19.     width: 200%;  
  20.     border:1px solid #ccc;  
  21.     padding: 10px;  
  22.     height: 539px;  
  23.    }  
  24.   .entry  
  25.     {  
  26.    margin-bottom:.5em; display:table-row;  
  27.     }  
  28.   label  
  29.    {  
  30.    color:#666666;  
  31.    display:table-cell;  
  32.    text-align: right;  
  33.      }  
  34.   input, textarea  
  35.     {  
  36.     margin-left:10px;  
  37.     display:table-cell;  
  38.       }  
  39.   .button  
  40.       {  
  41.      padding-left:140px;  
  42.      padding-bottom:5px;  
  43.      padding-top:5px;  
  44.       }  
  45.   input:required  
  46.    {  
  47.   outline: 1px red solid;  
  48.   color:red;  
  49.      }  
  50.   #form11 {width:500px;}  
  51.  </style>  
  52.  <form>  
  53.    <div class="entry" style="background-color: #FF6699">  
  54.    <label for="f-1">Name</label>  
  55.    <input id="f-1" name="haha" required>  
  56.    </div>  
  57.    <div class="entry" style="background-color: #FF6699">  
  58.    <label for="f-1a">Email</label>  
  59.    <input id="f-1a" name="mail" type=email>  
  60.    </div>  
  61.    <div class=entry style="background-color: #FF6699">  
  62.    <label ffor=f-2>Title</label>  
  63.    <input id=f-2   list=mylist type=text>  
  64.    <datalist id=mylist>  
  65.    <option label=Mr value=Mr>  
  66.    <option label=Ms value=Ms>  
  67.    <option label=Prof value="Mad Professor">  
  68.    </datalist> <code>datalist</code>  
  69.    </div>  
  70.    <div class=entry style="background-color: #FF6699">  
  71.    <label ffor=f-4>Age</label>  
  72.    <input id=f-4  name=shoesize type=number min=18 max=25>  
  73.    <code style="background-color: #FF6699">number  min=18 max=25</code>  
  74.    </div>  
  75.    <div class=entry style="background-color: #FF6699">  
  76.    <label ffor=f-7>Date of Birth</label>  
  77.    <input id=f-7  name=dob type=date><code>date</code>  
  78.    </div>  
  79.    <div class=entry style="background-color: #FF6699">  
  80.    <label ffor=f-8>Attractiveness</label>  
  81.    <input id=f-8  name=tap type=range min=1 max=11 value=1>  
  82.    <output name=result  onforminput=value=tap.value>1</output><code>range</code>  
  83.    </div>  
  84.    <div class=entry style="background-color: #FF6699">  
  85.    <label for=form11>Part I.D.</label>  
  86.    <input id="f11" name="part" pattern="[0-9][A-Z]{3}"  
  87.     placeholder="Digit followed by three uppercase letters."> <code>[0-9][A-Z]{3}</code>  
  88.    </div>  
  89.    <div class=button>  
  90.    <button type=submit>Send</button>  
  91.    </div>  
  92.   </form>   
  93.  </body>  
  94. </html> 
Step 10: Press Ctrl + F5 run application on a browser.
 
1.gif
 
 Click on the Send button to show a name field validation.
 
2.gif
 
After entering a name in the name field click the send button to show an email field validation.
 
3.gif
 
After filling in all fields they show a port id validation because the entry is not matched for the range.
 
4.gif
 
Here are some other useful resources which may help you.


Similar Articles