MVC3 & MVC4 supports unobtrusive client-side
validation. In which validation rules are defined using attributes added
to the generated HTML elements. These rules are interpreted by the
included JavaScript library and uses the attribute values to configure
the jQuery Validation library which does the actual validation work. In
this article, I would like to demonstrate various ways for enabling or
disabling the client side validation.
We can also enable the client-side validation programmatically. For this we need to do code with in the Application_Start() event of the Global.asax, as shown below.
Enable Client-Side Validation in MVC
For enabling client side validation, we required to include the jQuery min, validate & unobtrusive scripts in our view or layout page in the following order.The order of included files as shown above, is fixed since below javascript library depends on top javascript library.
- <script src="@Url.Content("~/Scripts/jquery-1.6.1.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
Enabling and Disabling Client-Side Validation at Application Level
We can enable and disable the client-side validation by setting the values of ClientValidationEnabled & UnobtrusiveJavaScriptEnabled keys true or false. This setting will be applied to application level.For client-side validation, the values of above both the keys must be true. When we create new project using Visual Studio in MVC3 or MVC4, by default the values of both the keys are set to true.
- <appSettings>
- <add key="ClientValidationEnabled" value="true"/>
- <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
- </appSettings>
We can also enable the client-side validation programmatically. For this we need to do code with in the Application_Start() event of the Global.asax, as shown below.
- protected void Application_Start()
- {
- //Enable or Disable Client Side Validation at Application Level
- HtmlHelper.ClientValidationEnabled = true;
- HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
- }
Enabling and Disabling Client-Side Validation for Specific View
We can also enable or disable client-side validation for a specific view. For this we required to enable or disable client side validation inside a Razor code block as shown below. This option will overrides the application level settings for that specific view.
- @model MvcApp.Models.Appointment
- @{
- ViewBag.Title = "Make A Booking";
- HtmlHelper.ClientValidationEnabled = false;
- }
- ...