Thursday, 7 February 2013

Simple email validation without validation control in ASP.NET 4.5 and HTML 5 in TextBox control

New feature in ASP.Net 4.5. HTML5 introduces new data types which also support by ASP.NET 4.5 textbox control. For email validation you do not require any validation controls. We need to just set property of textbox and input type control.

Your browser must support HTML5 if you want to use this feature.

Now ASP.Net supports new attributes in TextMode property. We are going to use "Email" attribute. There are different way to do this email validation in ASP.NET 4.5 and HTML5. But ASP.NET 4.5 Utlimetly converting to HTML5 at a time of rendering.

Here is example for this.


ASP.Net Example :
In this example we take one ASP.NET textbox control and set its TextMode property to TextMode="Email", and also one ASP.Net Button to make post back. Now when you insert wrong email format text in the textbox at that time textbox color become red and when you click now Save button, page is not going to postback and it will display one text message near textbox like "Please enter an email address". You can see this in output image below.

Code :
      Email : <asp:TextBox runat="server" ID="txtEmail" TextMode="Email"></asp:TextBox>
      <asp:Button runat="server" ID="btnSave" Text="save" />

HTML5 Example : 
In this example we take one HTML input control and set its type property to type="email". Now when you insert wrong email format text int the textbox at that time textbox color become red and when you move mouse over text box it will display message as tool tip like "Please enter an email address". You can see this in output image below.

Code :
     Email : <input name="Email" type="email" id="Email" />

Output (ASP.NET Example Output) :

ASP.Net Validation

Output (HTML5 Example Output) : 

HTML 5 Validation

Note : Give Us your valuable feedback in comments. Give your suggestions in this article so we can update our articles according to that.

Below are the books that you would like :

2 comments:

  1. good articles dude.....


    nice tips/trick ..your activities....


    ReplyDelete
  2. share the source code or the complete code :D lacho_20010@hotmail.com

    ReplyDelete