HTML and CSS Reference
In-Depth Information
<%= Html.TextBoxFor(model=>model.Age,
new {required="required",type="number",min="18",max="100"})%>
<%= Html.ValidationMessageFor(model=>model.Age,"*")%>
...
<%= Html.LabelFor(model=>model.Income)%>
...
<%= Html.TextBoxFor(model=>model.Income,
new {type="range",min="2",max="20",step="4"})%>
<%= Html.ValidationMessageFor(model=>model.Income,"*")%>
...
<%= Html.LabelFor(model=>model.Bio)%>
...
<%= Html.TextAreaFor(model=>model.Bio,
new {spellcheck="true",rows="3",cols="30"})%>
<%= Html.ValidationMessageFor(model=>model.Bio,"*")%>
...
<input id="btnSubmit" type="submit" value="Submit" />
...
<%= Html.ValidationSummary() %>
<div id="divErr" class="validation-summary-errors"></div>
...
<%}%>
Listing 5-29 uses many HTML helper methods such as
LabelFor
,
TextBoxFor
,
ValidationMessageFor
,
and
ValidationSummary
. Notice how HTML5 input types and attributes are specified in the second
parameter of the HTML helper methods. The validation conditions listed at the beginning of this section
are implemented using HTML5 attributes. The server-side validation errors are displayed by the
ValidationSummary()
method. The
<div>
element below the validation summary is intended to display
HTML5 validation messages.
Checking for Duplicate Display Names and E-mail Addresses
To ensure that the entered display name and e-mail address don't already exist in the database, you need
to call the
IsDuplicateDisplayName()
and
IsDuplicateEmail()
methods from the jQuery code, discussed
earlier. You call them using the jQuery
$.ajax()
method when the Submit button is clicked. Listing 5-30
shows how to check for duplicate display names.
Listing 5-30.
Checking for Duplicate Display Names
if ($("#DisplayName").val() != "") {
var data = '{ "displayname" : "' + $("#DisplayName").val() + '"}';
$.ajax({
url: '/User/IsDuplicateDisplayName',
type: 'post',
data: data,
dataType: 'json',
contentType: "application/json; charset=utf-8",
async: false,
success: function (result) {
var displayname = $("#DisplayName").get(0);
if (result == true) {
