A rule can be applied to an input field in two ways:
1. Declarative, the rule is specified in the input field by means of the class attribute:
<
input name="email" id="email" maxlength="60" class="required email" type="text"/>
As you can see, two rules were specified in the class attribute, "Required" and "Email", which means that two validations have to be performed for this field. Many rules can be applied to the same field, they only have to be separated by an space.
2. Imperative in code, the rule is specified in an script:
<
script type="text/javascript">
$(document).ready(function(){
$("#form-sign-up").validate( {
rules: {
email: {
required: true,
email: true
},
messages: {
email: {
required: "Please provide an email",
email: "Please provide a valid email"
} });
});
</
script>
The validation was attached to the input field "email" in the form "form-sign-up". The message displayed when a validation fails for an specific field can also be customized using the "messages" section in the script. (This is optional, the plugin already comes with a set of pre-defined error messages)
And finally, one of the most interesting validation rules you can find there is "remote", which performs a remote validation using an Ajax endpoint. At this point we can use an MVC controller method to perform an specific validation, for instance to see if a login name is still available to be used.
<
script type="text/javascript">
$(document).ready(function(){
$("#form-sign-up").validate( {
rules: {
login: {
required: true,
remote: '<%=Url.Action("IsLoginAvailable", "Accounts") %>'
}
},
messages: {
login: {
required: "Please provide an alias",
remote: jQuery.format("{0} is already in use")
}
} });
});
</
script>
The only requirement for the controller is that it must be return Json with the result of the validation