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

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.