HTML and CSS Reference
In-Depth Information
$("#divErr").append("Duplicate Display Name!<br/>");
}
},
error: function (err) { alert(err.status + " - " + err.statusText); }
});
}
This code calls the
IsDuplicateDisplayName()
action method with the help of
$.ajax()
. Notice how
the
displayname
parameter is passed as a JSON object. The
success
method receives a value of
true
if a
display name already exists in the database. In that case, an error message is appended to divErr using the
append()
method.
Although it isn't discussed here, checking for duplicate e-mails works along similar lines.
Comparing the Password and Confirm Password Fields
Ensuring that the values entered in the Password and Confirm Password text boxes are the same is simple.
Listing 5-31 shows how it's done.
Listing 5-31.
Validating Password and Confirm Password
if ($("#Password").val() != $("#ConirmPassword").val()) {
$("#divErr").append("Password mismatch!<br/>");
}
The values entered in the text boxes are compared, and if there is any mismatch, an error message is
added to the
divErr
element.
Handling the invalid Event and Displaying Validation Errors
To display other validation errors from input types (
required
field,
min
/
max
overflow, e-mail and URL
patterns, and so on), you handle the
invalid
event on all the
<input>
elements. Listing 5-32 shows how this
is done.
Listing 5-32.
Handling the
invalid
Event
$(document).ready(function () {
$("input").bind("invalid",OnInvalid);
...
})
function OnInvalid(evt) {
var input = evt.target;
var validity = input.validity;
if (!validity.valid) {
if (input.id == "DisplayName")
{ $("#divErr").append("Please enter Display Name!<br/>"); }
if (input.id == "Email")
{ $("#divErr").append("Please enter Email Address!<br/>"); }
if (input.id == "Password")
{ $("#divErr").append("Please enter Password!<br/>"); }
if (input.id == "ConirmPassword")
