This article shows how HTML5 validate the controls easy and fastest way in client side by Developer.
HTML stands for hypertext markup language, which is used
to design the web page. Microsoft has released new version of HTML that is
called HTML5, it provides features such as audio support, video support, reduce
autofocus, regular expression, required, max and min attributes.
objective of this article is to make validation easier and fastest with HTML5. Microsoft
is releasing the software one by one with new features better than existing
application or software. We are developer need to adapt new features of
software, applications or languages, which are provided by Microsoft.
is providing attributes like Required, Pattern, min and max. It was hard time
discuss also existing HTML 4, which was not available any features to validate
Let's start discussing the validation part for HTML5. It is nice feature. Developer
can do validation on controls at designing time. Previously we were
validating into controls with the help of java script, jquery and other
languages. Instead of those languages we can use HTML5 nicely.
Using the code
Look into below screen where code in visual
studio to validate control using HTML5 attributes Required, Pattern, Max and
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HTML5Example.aspx.cs" Inherits="WebApplication1.HTML5Example" %>
<form id="form1" runat="server">
<h3 class="auto-style1">Easy and faster validation with html5</h3>
<input required="required" title="Must enter
your name" style="background-color: #CCFF66" /><span class="auto-style3">
<input required="required" pattern="[-0-9]+"
number only" style="background-color: #CCFF66" />
<input type="date" required="required" max="2013-07-30" min="2013-07-01" title="Enter date
between 2013-07-01 and 2013-07-30 " />
<button style="color: #FFFFFF; background-color: #800000">Submit</button>
Lets look into the below code snippet, we are all aware of validation control in asp.net. If not there is no
issue because we are using as same what provided before in ASP.NET. HTML5
having Required attribute to validate controls to check value is empty or not
and for validating email, phone number, security code to be used pattern
attribute to validate controls, as well for comparing the two dates or values
in HTML5 having min and max attribute to put the value minimum and maximum to
satisfy expected validations.
required="required" title="Must enter your name"/>
required="required" pattern="[-0-9]+" title="Must
enter number only"/>
id="Datecheck" type="date" name="check"
min="2013-07-01" title="Enter date between 2013-07-01 and
2013-07-30 " />
the control in client side.
above screen where name is required to enter on textbox and displayed error
above screen, we have to enter any value let them verify mobile number. See
below screen where mobile number must be number only, we can change as expected
validation with pattern attributes.
Let's see the above screen where two dates are validating, it
shows error messages same as Jquery or ajax.
We looked into how HTML5 works in visual studio to validate control easily and
fastest way with good looks.
this article, we tried to understand
clear ideas with all validations in HTML5. It was nice journey. Hope you will
be enjoying with reading code as well I have put practically approaches to make
understand clear and comfortable to everyone, nice to explain the new features
of HTML5. Thanks to all for reading my article.