Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Part 85 - Enable client side validation in asp.net mvc

Suggested Videos 
Part 82 - Creating custom validation attribute
Part 83 - RegularExpression attribute
Part 84 - Compare attribute



Validation attributes in asp.net mvc provides both client and server side validation. There are 2 simple steps to enable client side validation in asp.net mvc.

Step 1: Enable ClientValidation and UnobtrusiveJavaScript in web.config file.
<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>



Step 2: Include a reference to the following javascript files. In real time, the references to the javascript files are included in the master page. This avoids the need to reference them on each and every view where we need validation. The order in which the script files are referenced is also important. jquery.validate is dependant on jquery and /jquery.validate.unobtrusive is dependant on jquery.validate, so they should be referenced in the following order. Otherwise, client side validation will not work. In short, JavaScript is parsed "top-down", so all dependencies need to be referenced before the dependant reference.
<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

With these 2 changes, validation should now happen on the client without a round trip to the server. If the client disables javascript in the browser, then client side validation does not work, but server side validation will continue to work as normal.

4 comments:

  1. i want to learn a vb database program as front end and oracle database as backend.. can u hep me.. i saw ur tutorial video.. its very nice.. if possible u can use frontend java netbeans IDE. plz

    satyajit.tec@gmail.com

    ReplyDelete
  2. Hi Venkat,

    U have created custom validation like Range and CurrentDate validation,these custom validation client side validation is not working. we need to fix this issue. what we need to to, can u please respond ASAP

    Thanks in advance
    Ramesha

    ReplyDelete
    Replies
    1. As jquery provides functions for some of the validations MVC has used and that's why you are automatically getting them.
      If you want to have custom validations as well, you need to write your own js/jquey code and then it will work.

      Delete
  3. OK....Awesome session with client side validation. Here I got a problem. I have put another button called "Cancel" inside that same "beginform" and When I press this button I need the page should be redirected to the Index page. But actually what is happening here, When I press the cancel button the client side validation is occurred, the validation error message is being displayed and the page never redirected to the Index page. What is the problem with this approach....????

    ReplyDelete

It would be great if you can help share these free resources