What is Unobtrusive Validation in jQuery?

Last Updated : 23 Jul, 2020

jQuery is a Javascript library. An unobtrusive validation in jQuery is a set of ASP.Net MVC HTML helper extensions.By using jQuery Validation data attributes along with HTML 5 data attributes, you can perform validation to the client-side.

Unobtrusive Validation means without writing a lot of validation code, you can perform simple client-side validation by adding the suitable attributes and including the suitable script files.

These unobtrusive validation libraries need to be added:

jquery.validate.min.js
jquery.validate.unobtrusive.js

Installation via Package Managers:

```
Bower: bower install jquery-validation
```

NuGet: Install-Package jQuery.Validation

```
NPM  : npm i jquery-validation 
```

List of some data validation attribute:

Required
- data-val-required="This is required."
- data-val="true/false"
EmailAddress
- data-val-email="Error message"
MaxLength
- data-val-maxlength="Error message"
- data-val-maxlength-max="Maximum length (e.g. 5)"
MinLength
- data-val-minlength="Error message"
- data-val-minlength-min="Minimum length (e.g. 2)"

Method for unobtrusive validation:

Firstly, we need to add those libraries in the script of HTML files. These libraries provide a list of data attributes (data-val, data-val-required, and many more) for validation. Then the form should be built according to the requirements in which different types of data attributes can be used.

Example:

html

<!DOCTYPE html>
<html>
    <head>
        <!--These validation libraries need to be 
        included for unobtrusive validation -->
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
        <script src=
"https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js">
      </script>
        <script src=
"https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js">
      </script>
    </head>
    <body>
        <form id="myform">
            <p>
                <label for="roll">Roll no.</label>
                <!-- data-val-required is used to 
                   specify the msg for each rule -->
                <!-- data-val is used to add rules to 
                      the input elements -->
                <input name="roll" 
                       type="number" 
                       data-val-required="Roll no. is required." 
                       data-val="true" 
                       style="margin-left: 15px;" /><br />
                <span data-valmsg-for="roll" 
                      data-valmsg-replace="true" 
                      style="margin-left: 75px; color: red;" />
            </p>
            <p>
                <label for="name">Name</label>

                <input name="name" 
                       type="text" 
                       data-val-required="Name is required."
                       data-val="true" 
                       style="margin-left: 30px;" /><br />
                <span data-valmsg-for="name" 
                      data-valmsg-replace="true" 
                      style="margin-left: 75px; color: red;" />
            </p>
            <p>
                <label for="mobile">Mobile no.</label>
                <input name="mobile" 
                       type="number" 
                       data-val-required="Mobile no. is required." 
                       data-val="true" /><br />
                <span data-valmsg-for="mobile" 
                      data-valmsg-replace="true" 
                      style="margin-left: 78px; color: red;" />
            </p>

            <p>
                <label for="email">E-Mail </label>
                <input type="email" name="email" 
                       data-val-required="Email is required." 
                       data-val="true" 
                       style="margin-left: 30px;" /><br />
                <span data-valmsg-for="email" 
                      data-valmsg-replace="true" 
                      style="margin-left: 80px; color: red;" />
            </p>

            <p>
                <input class="submit" 
                       type="submit" 
                       value="Submit" />
            </p>
        </form>
    </body>
</html>