在 ASP.NET MVC 表單上禁用不顯眼的驗證

Question

我在一個頁面上有兩個表格。 我希望第一個表單使用不顯眼的驗證，因為它是由 ASP.NET MVC 框架自動生成的。 還有第二個形式，但是，這是我寫的手動，不應該使用不引人注目的驗證。

這是一些代碼：

@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
});

作為旁注：當我從頁面中刪除不顯眼的驗證時，第二個表單會驗證，但第一個不會。 如果我使用不顯眼的驗證，第一個表單會驗證，但第二個表單不會。

我知道我可以在客戶端完成整個驗證——如果這是唯一的方法，我會這樣做。 我正在考慮一種繼續使用非侵入式驗證的方法，但允許使用例如自定義屬性有條件地禁用它。

Answer 1

您可以通過此 Html Helper 屬性從 razor 代碼中禁用不顯眼的驗證：

HtmlHelper.ClientValidationEnabled = false;

這樣，您可以根據特定視圖/部分視圖中的此設置對不同表單進行不顯眼的驗證。

Answer 2

可以標記元素或者找到第二個form所有input並刪除規則，本示例是刪除表單中某些控件的所有規則，這個原因根據用戶選擇的一些選項，需要的值會是其他的. 出於這個原因，我存儲規則以便稍后恢復。

///Remove rules
$("input.rO,textarea.rO").each(function () {
   try
   {
      var rule = $(this).rules();
      if (rule) {
         $(this).data("rule", rule);
         $(this).rules("remove");
     }
  }
  catch(err){}
 });
 ///Restore rules
 $("input.rO.om" + v + ",textarea.rO.om"+v).each(function () {
      try
      {
        var rule = $(this).data("rule");
        if (rule)
           $(this).rules("add", rule);
      }
      catch(err){}
    });

Answer 3

如果您刪除unobtrusive-validation ，那么您只是在單獨使用 jQuery Validate 插件。

如果是這種情況，那么您必須遵循插件的文檔。 所述.valid()之后的插件經由第一初始化只能用方法.validate()方法。 另見： http : //jqueryvalidation.org

但是，不需要在submit函數或處理程序中包裝任何東西。 如果插件正確初始化，插件會自動捕獲提交事件。

$(document).ready(function() {

    $('#myform').validate({
        // rules and options
    });

    jQuery.validator.addClassRules("phone", {
         required: true
    });

});

簡單演示： http : //jsfiddle.net/DW4qE/