Disable unobtrusive validation on an ASP.NET MVC form

asp.net-mvc, asp.net-mvc-4, jquery-validate, unobtrusive-validation

Solution

You can disable the unobtrusive validation from within the razor code via this Html Helper property:

HtmlHelper.ClientValidationEnabled = false;

That way you can have unobtrusive validation on and off for different forms according to this setting in their particular view/partial view.

Problem

I have two forms on a page. I want the first form to use unobtrusive validation, as it's since automatically generated by ASP.NET MVC Framework. There is a second form, however, which I wrote manually, that should not use unobtrusive validation. Here's some code: ``` @using (Html.BeginForm("Add", "Contacts", FormMethod.Post, new { id = "AddForm" })) { @Html.ValidationSummary(true) <fieldset> <legend>Datos Contacto</legend> <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label"> @Html.LabelFor(model => model.ContactDepartmentID) </div> <div class="editor-field"> @Html.DropDownListFor(model => model.ContactDepartmentID, (List<SelectListItem>)ViewBag.ContactDepartments) @Html.ValidationMessageFor(model => model.ContactDepartmentID) </div> <div class="editor-label"> @Html.LabelFor(model => model.Sex) </div> <div class="editor-field"> @Html.DropDownListFor(model => model.Sex, (List<SelectListItem>)ViewBag.Sexs) @Html.ValidationMessageFor(model => model.Sex) </div> </fieldset> <br /> @Html.HiddenFor(model => model.SerializedEmails, new { data_bind = "value: ko.toJSON($root.emails())" }) @Html.HiddenFor(model => model.SerializedPhones, new { data_bind = "value: ko.toJSON($root.phones())" }) } <form id="phoneForm" > <fieldset> <legend>Teléfonos</legend> <table class="table"> <tbody data-bind="foreach: phones"> <tr> <th> Celular? </th> <th> Phone </th> <th> Extension </th> <th> </th> </tr> <tr> <td> <input type="checkbox" data-bind="checked: isMobile" /> </td> <td> <input class="phone" data-bind='value: phone'/> </td> <td> <input type="text" class="extension" data-bind='value: phoneExtension, enable: !isMobile() ' /> </td> <td> <a href='#' data-bind='click: $root.removePhone'>Delete</a> </td> </tr> </tbody> </table> <a href='#' data-bind='click: $root.addPhone'>Agregar teléfono</a> </fieldset> </form> <p> <button onclick="Submit();" type="button" class="btn btn-primary" data-bind='enable: phones().length > 0 || emails().length > 0'> Create</button> </p> ``` JS: ``` function Submit() { var valid = $('#AddForm').valid(); var valid2 = $('#phoneForm').valid(); } jQuery.validator.addClassRules("phone", { required: true }); ``` As a side note: When I remove the unobtrusive validation from the page, the second form validates, but the first does not. If I use unobtrusive validation the first form validates, but the second form does not. I know I can do the whole validation on the client side—and, if that's the only way, I will do it. I was thinking about a way to continue using unobtrusive validation, but allowing it to be conditionally disabled using e.g. custom attributes.

Original source