What is jQuery Unobtrusive Validation?

Brad Wilson has a couple great articles on unobtrusive validation and unobtrusive ajax.
It is also shown very nicely in this Pluralsight video in the section on " AJAX and JavaScript".

Basically, it is simply Javascript validation that doesn't pollute your source code with its own validation code. This is done by making use of data- attributes in HTML.

With the unobtrusive way:

• You don't have to call the validate() method.
• You specify requirements using data attributes (data-val, data-val-required, etc.)

Jquery Validate Example:

<input type="text" name="email" class="required"><script>        $(function () {            $("form").validate();        });</script>

Jquery Validate Unobtrusive Example:

<input type="text" name="email" data-val="true" data-val-required="This field is required.">  <div class="validation-summary-valid" data-valmsg-summary="true">    <ul><li style="display:none"></li></ul></div>

For clarification, here is a more detailed example demonstrating Form Validation using jQuery Validation Unobtrusive.

Both use the following JavaScript with jQuery:

  $("#commentForm").validate({    submitHandler: function(form) {      // some other code      // maybe disabling submit button      // then:      alert("This is a valid form!");//      form.submit();    }  });

The main differences between the two plugins are the attributes used for each approach.

jQuery Validation

Simply use the following attributes:

• Set required if required
• Set type for proper formatting (email, etc.)
• Set other attributes such as size (min length, etc.)

Here's the form...

<form id="commentForm">  <label for="form-name">Name (required, at least 2 characters)</label>  <input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>  <input type="submit" value="Submit"></form>

jQuery Validation Unobtrusive

The following data attributes are needed:

• data-msg-required="This is required."
• data-rule-required="true/false"

Here's the form...

<form id="commentForm">  <label for="form-x-name">Name (required, at least 2 characters)</label>  <input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">  <input type="submit" value="Submit"></form>

Based on either of these examples, if the form fields that are required have been filled, and they meet the additional attribute criteria, then a message will pop up notifying that all form fields are validated. Otherwise, there will be text near the offending form fields that indicates the error.

References: - jQuery Validation: https://jqueryvalidation.org/documentation/