Question

我尝试使用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>

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

Answer 1

看起来你有几种形式，并且你想要打开和关闭验证。您可以手动启用和禁用每个表单的验证。

以下是JavaScript代码示例：

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

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

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

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

Answer 2

好吧，我确实让它变得更加复杂。我需要做的就是隐藏（display：none）div，我不想验证它。我确实知道它不验证隐藏字段，但我认为隐藏必须是直接输入标记（或选择标记）。但这足以隐藏一些adjecent标签。例如：

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

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

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

在重新分析验证器之后，不显眼的验证适配器停止工作

2 个答案: