29.05.2015 Views

o_19mgorv9t13a3ko71fev19l81mqa.pdf

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

The feedback is also immediate when the user corrects the error. If you return to the name field and keep typing, the validation<br />

error will be removed when the name you have entered is three or more characters long. But if you keep typing until you get to the<br />

eleventh character, you will see the error reappear. This is because I specified a minimum length of three characters and a<br />

maximum length of ten for the ClientName property with the StringLength attribute. This kind of dynamic feedback<br />

helps the user to provide the data that the application requires without having to submit the form to the server and wait for a<br />

response.<br />

Understanding How Client-Side Validation Works<br />

One of the benefits of using the MVC Framework client-side validation feature is that I do not have to write any JavaScript.<br />

Instead, the validation rules are expressed using HTML attributes. Here is the HTML that is rendered by the<br />

Html.EditorFor helper for the ClientName property when client-side validation is disabled:<br />

...<br />

<br />

...<br />

And here is the HTML rendered for the same property when client-side validation is switched on:<br />

...<br />

<br />

...<br />

The MVC client-side validation support doesn’t generate any JavaScript or JSON data to direct the validation process; like much<br />

of the rest of the MVC Framework, validation relies on convention. The first attribute that was added is data-val. The<br />

jQuery Validation library identifies those fields that require validation by looking for this attribute.<br />

Individual validation rules are specified using an attribute in the form data-val- , where name is the rule to be<br />

applied. So, for example, the Required attribute I applied to the model class has resulted in a data-val-required<br />

attribute in the HTML. The value associated with the attribute is the error message associated with the rule. Some rules require<br />

additional attributes. You can see this with the length rule, which has data-val-length-min and data-vallength-max<br />

attributes to let me specify the minimum and maximum string lengths that are allowed. The interpretation of the<br />

required and length validation rules is provided by the jQuery Validation library, on which the MVC client validation features are<br />

built.<br />

AVOIDING CONFLICTS WITH BROWSER VALIDATION<br />

Some of the current generation of HTML5 browsers support simple client side validation based on the attributes applied to<br />

input elements. The general idea is that, say, an input element to which the required attribute has been applied,<br />

for example, will cause the browser to display a validation error when the user tries to submit the form without providing a<br />

value.<br />

If you are generating form elements from models, as I have been doing in this chapter, then you won’t have any problems<br />

with browser validation because the MVC Framework generates and uses data attributes to denote validation rules (so that,<br />

for example, an input element that must have a value is denoted with the data-val-required attribute, which<br />

browsers do not recognize).<br />

However, you may run into problems if you are unable to completely control the markup in your application, something that<br />

often happens when you are passing on content generated elsewhere. The result is that the jQuery validation and the browser<br />

validation can both operate on the form, which is just confusing to the user. To avoid this problem, you can add the<br />

novalidate attribute to the form element.<br />

686

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!