What is Unobtrusive Validation in jQuery?

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
Bower: bower install jquery-validation
NuGet: Install-Package jQuery.Validation
NuGet: Install-Package jQuery.Validation
NPM  : npm i jquery-validation 
NPM  : npm i jquery-validation 
List of some data validation attribute:Requireddata-val-required=”This is required.”data-val=”true/false”EmailAddressdata-val-email=”Error message”MaxLengthdata-val-maxlength=”Error message”data-val-maxlength-max=”Maximum length (e.g. 5)”MinLengthdata-val-minlength=”Error message”data-val-minlength-min=”Minimum length (e.g. 2)”
List of some data validation attribute:
Requireddata-val-required=”This is required.”data-val=”true/false”
data-val-required=”This is required.”
data-val=”true/false”
EmailAddressdata-val-email=”Error message”
data-val-email=”Error message”
MaxLengthdata-val-maxlength=”Error message”data-val-maxlength-max=”Maximum length (e.g. 5)”
MaxLength
data-val-maxlength=”Error message”
data-val-maxlength-max=”Maximum length (e.g. 5)”
MinLengthdata-val-minlength=”Error message”data-val-minlength-min=”Minimum length (e.g. 2)”
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:
<!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>
Output:
Before submit:
After submit:
jQuery-Misc
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.