HTML and CSS Reference
In-Depth Information
The
<form>
element has the
novalidate
attribute set to
novalidate
. If you submit this form, no
validations are performed on the input data based on input types or pattern.
The Submit button has the
formnovalidate
attribute set to
formnovalidate
. This has the same effect as
the
novalidate
attribute.
Performing Custom Validations
In spite of the fact that HTML5 input types along with required and pattern attributes let you validate data,
real-world web applications often still call for complex validations. In particular, validations that involve
validating against data residing in a database are beyond the reach of the techniques discussed so far.
Luckily, HTML5 also offers a technique you can use to perform such custom validations. It involves two
steps:
1. Write a custom JavaScript function that performs the custom validation.
2. If the validation fails, call the
setCustomValidity()
method on the input field to
inform the browser about the error.
Step
2 is your chance to supply a custom error message to the browser so the browser can pop it
whenever validation fails. To understand how these steps work, look at Listing 5-9.
Listing 5-9.
Custom Validation Function
$(document).ready(function () {
$("#btnSubmit").click(OnSubmit);
});
function OnSubmit(evt) {
$.ajax({
url: '/home/ValidateCustomerID',
type:'post',
data: { id: $("#txtCustId").val() },
dataType: 'json',
async:false,
success: function (result) {
var textbox = $("#txtCustId").get(0);
if (result == false) {
textbox.setCustomValidity("Customer ID was not found in the database!");
}
else {
textbox.setCustomValidity("");
}
}
});
}
Listing 5-9 shows the
click
event handler of a Submit button. This event handler invokes a controller
action named
ValidateCustomerID()
using
$.ajax()
and passes a customer ID entered in a text box
(
txtCustId
). The
ValidateCustomerID()
action return
true
if the supplied customer ID is found in the
Customers
table of the
Northwind
database; otherwise it returns
false
. Notice the
success
function of the
$.ajax()
call: if a customer ID isn't found in the database, the
setCustomValidity()
method is called on
the text box along with a custom error message. This error message is displayed to the user when the form
