How to implement HTML5 validation in registration form ?


HTML5Tag

Hi

Recently i was doing some test with HTML 5 tag. There are some nice cool features have been added. Now no need to write Javascript validation logic or use validation control.

Now we can use inbuilt features of HTML 5 for validation purpose. Here is the complete syntax

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
 <fieldset style="width: 549px">
 <legend><b>Login Detail</b></legend>
  UserName:
<input id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />

Password:
<input id="password" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required>
<p/>
<input type="submit" class="btn" value="Login">
</fieldset>

<br />
<fieldset style="width: 552px">
<legend><b>Registration Detail</b></legend>
 UserName:
<input id="username2" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />

&nbsp;Password:
<input id="password2" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

URL:
<input id="url" name="url" type="url"> <br /> <br />

<p/>
<input type="submit" class="btn" value="Register"> <br /> <br />
</fieldset>
</form>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: