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
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 () {
function OnSubmit(evt) {
url: '/home/ValidateCustomerID',
data: { id: $("#txtCustId").val() },
dataType: 'json',
success: function (result) {
var textbox = $("#txtCustId").get(0);
if (result == false) {
textbox.setCustomValidity("Customer ID was not found in the database!");
else {
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
Search WWH ::

Custom Search