HTML and CSS Reference
In-Depth Information
You might wonder why you would use validation controls and HTML5 input types together. Because
HTML5 input types aren't supported on all browsers, you need to use validation controls as a fallback
mechanism. So, in all you have the following options:
• Use only HTML5-speciic input types and validation attributes. This approach works
if the target browser supports the HTML5 input types; otherwise no validations are
performed.
• Use a combination of HTML5 validation techniques and ASP.NET validation
controls. This approach ensures that validations work in all browsers, but there may
be some redundancy in the error messages as discussed earlier.
• Use a combination of HTML5 validation techniques and ASP.NET validation
controls with client-side validation turned off. In this case, if the target browser
supports HTML5, the HTML5 validation techniques execute; otherwise the form is
posted back to the server, and validation controls validate the data. Of course, in the
latter case, there is an overhead of the extra round trip to the server.
HTML5 Input Types and Server-Side Validations
in an MVC Application
One way to combine HTML5's new validation techniques with ASP.NET MVC is to use HTML5 to provide
client-side validation while using ASP.NET MVC to provide server-side validation in the controller. In this
example, you validate first name, last name, and e-mail values using the MVC
ValidationMessage
and
ValidationSummary
HTML helpers. Listing 5-12 shows a view that renders a simple form with three fields:
FirstName
,
LastName
, and
Email
.
Listing 5-12.
Validation Helpers and HTML5 Input Types in an MVC Application
<% using (Html.BeginForm()) { %>
<table cellpadding="3" cellspacing="0" class="style1">
<tr>
<td nowrap="nowrap" width="5%">
<%= Html.Label("First Name :")%>
</td>
<td width="50%">
<%= Html.TextBox("FirstName", "", new {required="required"})%>
<%= Html.ValidationMessage("FirstName","*")%>
</td>
</tr>
<tr>
<td nowrap="nowrap" width="5%">
<%= Html.Label("Last Name :")%>
</td>
<td width="50%">
<%= Html.TextBox("LastName", "", new {required="required"})%>
<%= Html.ValidationMessage("LastName","*")%>
</td>
</tr>
<tr>
<td nowrap="nowrap" width="5%">
