重新解析验证器后，不显眼的验证适配器停止工作答案

【问题标题】：Unobtrusive validation adapter stopped working after reparse validator重新解析验证器后，不显眼的验证适配器停止工作
【发布时间】：2013-12-19 09:55:30
【问题描述】：

我尝试使用 javascript 制作表单向导，但我在不显眼地验证复选框时遇到问题。在页面标题中，我包含了不显眼的验证脚本文件，之后我添加了以下代码： jQuery.validator.unobtrusive.adapters.addBool("brequired", "required"); 如果我提交整个表格，它会起作用。但正如我所说，我想做向导。所以我在表单之后的正文中添加了这个脚本文件（我去掉了隐藏的步骤）：

var $jq = jQuery.noConflict();

if ($jq(document).ready()) {
    //remove data-val attribute from all field in form
    $jq('#form-wizard > div[id^=form-step] *')
        .filter("input,select").removeAttr("data-val");
}

function validate(form, currentStep) {
    //add data-val attribute to the field which I want validate in this step
    form.find("#form-step-" + currentStep + " *")
        .filter("input, select").attr("data-val", "true");

    //without this, parse() function will not update validator 
    //regardless any changes in form (added data-val="true" attribute)
    form.removeData("validator").removeData("unobtrusiveValidation");

    //I try add adapter again before parse but it don't work
    //$jq.validator.unobtrusive.adapters.addBool("brequired", "required");
    $jq.validator.unobtrusive.parse(form);

    if (!form.valid()) {
        form.children("#form-step-" + currentStep + " *")
            .filter("input, select").removeAttr("data-val");
        return false;
    }

    form.children("#form-step-" + currentStep + " *")
        .filter("input, select").removeAttr("data-val");

    //reset jQuery Validate's internals
    form.validate().resetForm();

    //reset unobtrusive validation summary, if it exists
    form.find("[data-valmsg-summary=true]")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid")
        .find("ul").empty();

    //reset unobtrusive field level, if it exists
    form.find("[data-valmsg-replace]")
        .removeClass("field-validation-error")
        .addClass("field-validation-valid")
        .empty();

    return true;
}

这个 validate() 函数在点击下一个按钮后被调用。但是使用包含此脚本的页面，它就像适配器一样接缝不起作用。 Chcekbox 未经验证。我在解析所有必填字段（包括复选框）之前检查了是否设置了data-val="true"。

编辑： 我的表单有这样的结构：

<form id="form-wizard">
    <div id="form-step-1">
        <input>
          ...
        <input>
    </div>
    <div id="form-step-2">
        <input>
          ...
        <input>
    </div>
</form>

我真的不知道我错过了什么。

【问题讨论】：

标签： javascript jquery asp.net-mvc adapter unobtrusive-validation

【解决方案1】：

您似乎有多个表单，并且您希望打开和关闭验证。您可以手动启用和禁用每个表单的验证。

这里是示例 JavaScript 代码：

var $form = $("#my-step-1");

// disable validation
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');

// enable validation
$.validator.unobtrusive.parse($form);

在文档准备好后，您可以禁用所有表单的验证并手动启用第一个表单。然后，对于第二个，等等。

【讨论】：

不完全是，我只有一种表单，其中有 id="#form-step-(some number)" 的 div。在这个 div 中，我有 fieldset 等等。

【解决方案2】：

好的，我让它变得更复杂，因为它实际上是。我需要做的就是隐藏我不想验证的 (display:none) div。我确实知道它不会验证隐藏字段，但我认为隐藏必须直接输入标签（或选择标签）。但是隐藏一些相邻的标签就足够了。例如：

<div id="form-step-2" class="hidden">...some fieldset, input etc...</div>

现在它不会验证form-step-2 div。

无论如何我仍然不知道为什么我以前的方法不起作用......

【讨论】：