What is jQuery Unobtrusive Validation?

Question

I know what the jQuery Validation plugin is. I know the jQuery Unobtrusive Validation library was made by Microsoft and is included in the ASP.NET MVC framework. But I cannot find a single online source that explains what it is. What is the difference between the standard jQuery Validation library and the "unobtrusive" version?

Solution 1

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.

Solution 2

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>

Solution 3

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/

Solution 4

jQuery Validation Unobtrusive Native is a collection of ASP.Net MVC HTML helper extensions. These make use of jQuery Validation's native support for validation driven by HTML 5 data attributes. Microsoft shipped jquery.validate.unobtrusive.js back with MVC 3. It provided a way to apply data model validations to the client side using a combination of jQuery Validation and HTML 5 data attributes (that's the "unobtrusive" part).

View more solutions

Comments

[Preben Huybrechts]

unobstrusive validation will add data-val-... attributes in the HTML, so you can read the validation even in the HTML source.

[Tommy]

I believe the answer to your question is explained here: bradwilson.typepad.com/blog/2010/10/… He explains the difference between what happens when Unobtrusive is on or off.

[wwcdwdcw]

Can you please tell us the improvements done in mvc3 for Unobtrusive validations ?

[bio595]

Thank you, I was trying to Ctrl-F to find the valdiate() call in some code that I had to work on. Was wondering why I couldn't find it

[Misha Moroshko]

The link to the video is broken.

[bertl]

Thank you @MishaMoroshko for pointing that out. I couldn't find any alternative on Pluralsight for now, so I removed the link. I will edit the post again as soon as I have a substitute.

[Owen]

Some code examples would be nice. Because your reply as it is isn't really that helpful, most people coming here looking for quick solutions and code samples, not links to articles, they can break over time, they're they're generally good as a reference after you see the code sample. I prefer the next 2 answers.

[marked-down]

Yeah, "unobtrusive" appears to be a euphemism for "undiscoverable" here.