Challenges to validate controls with HTML 5.

Jitendrasoft09
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 5573 red flag
Rating: 5 out of 5  
 2 vote(s)

This article shows how HTML5 validate the controls easy and fastest way in client side by Developer.

Introduction


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 code when calling to JavaScript or css, less coding, good presentation, autofocus, regular expression, required, max and min attributes.


Objective


The 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. 

HTML5 is providing attributes like Required, Pattern, min and max. It was hard time to developer to validate the controls with JavaScript in client side. We will discuss also existing HTML 4, which was not available any features to validate the controls.

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 Min.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HTML5Example.aspx.cs" Inherits="WebApplication1.HTML5Example" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
 
</head>
<body>
<form id="form1" runat="server">
<div>
 
<h3 class="auto-style1">Easy and faster validation with html5</h3>
 
<label>
<span class="auto-style2">Name:</span>
<input required="required" title="Must enter your name" style="background-color: #CCFF66" /><span class="auto-style3">
Mobile Number</span>:
<input required="required" pattern="[-0-9]+"
title="Must enter number only" style="background-color: #CCFF66" />
<span class="auto-style3">Date:</span>
<input type="date" required="required" max="2013-07-30" min="2013-07-01" title="Enter date between 2013-07-01 and 2013-07-30 " />
</label>
<button style="color: #FFFFFF; background-color: #800000">Submit</button>
 
</div>
</form>
</body>
</html>


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.


<input
required="required" title="Must enter your name"/>
<input required="required" pattern="[-0-9]+" title="Must enter number only"/>
<input id="Datecheck" type="date" name="check" required="required" max="2013-07-30" min="2013-07-01" title="Enter date between 2013-07-01 and 2013-07-30 " />


So we can reduce the code or avoid the JavaScript code to validate the control in client side.


Shows Name

See above screen where name is required to enter on textbox and displayed error message.


Shows Mobile

In 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.

Shows Date

Let's see the above screen where two dates are validating, it shows error messages same as Jquery or ajax.


Conclusion


We looked into how HTML5 works in visual studio to validate control easily and fastest way with good looks.

In 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.




Page copy protected against web site content infringement by Copyscape

About the Author

Jitendrasoft09
Full Name: Jitendra Kumar
Member Level:
Member Status: Member,MVP
Member Since: 3/26/2013 2:40:53 AM
Country: India
Jitendra Kumar If my post helps you, plz mark as an answer.
http://www.dotnetfunda.com/
Jitendra Kumar

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)