jquery - 手动添加和删除 jQuery 验证器的验证错误

Question

我有一个搜索表单和基于淘汰赛的结果网格。执行搜索时，asp.net mvc 上会进行一些服务器端验证，如果模型状态无效，则会通过 JSON 返回模型错误列表。

我已经设置了 jQuery 验证，并且使用 jquery.unobtrusive 插件自动映射默认验证(正则表达式、必需等)。我发现 $.validate().showErrors({prop:error}) 作为一种根据服务器的 json 响应动态显示错误的方法，但我认为这不是正确的使用方法它用于显示服务器验证消息，因为此后无法重置字段(input-validation-error class 未删除)。

我需要一种在客户端上设置和重置错误的工作方法(如果 $.validate 中存在此类错误)。

jsFiddle 上有我的问题的示例:http://jsfiddle.net/goranobradovic/ughCm/

要重现它，请单击“添加错误”，然后单击“删除错误”，输入保持红色。

这是因为 showErrors 函数没有添加任何由验证触发的规则，因此字段保持“有效”状态，并且它不在 resetForm< 中使用的 elements() 列表中 从无效字段中删除 input-validation-error class。

基本上，我想要简单的方法来添加/删除带有客户端永远不满意的自定义消息的验证规则，以避免在手动设置错误时提交表单并必须删除 invalid class 删除错误消息后。

Answer 1

我通过用我自己的方法覆盖 jQuery 验证器中的 showErrors 函数解决了这个问题，该函数与不引人注目的生成的验证范围兼容，并清理了具有无效类的有效字段。这不是一个很好的解决方法，但它确实有效。

这是 jsfiddle 的解决方案:http://jsfiddle.net/goranobradovic/ughCm/5/

更新:根据网站指南，外部网站的链接不是正确的答案，因此我在此处添加代码示例。对于已经熟悉 jQuery 验证的人来说，只需查看 showErrors 函数中的两行代码即可。我使用 validator.settings.showErrors = showErrors; 将其分配给验证器。

HTML:

<form id="experiment" action="/" method="post">

<fieldset>
  <legend></legend>
        <div class="editor-label">
          <label for="Email">Email</label>
        </div>
        <div class="editor-field">
<input data-val="true" data-val-email="&amp;#39;Email&amp;#39; not valid email address." data-val-required="&amp;#39;Email&amp;#39; is mandatory." id="Email" name="Email" type="text" value=""><span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>        
        </div>
        <div class="editor-label">
          <label for="FirstName">First name</label>
        </div>
        <div class="editor-field">
          <input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="">
          <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
          <label for="LastName">Last name</label>
        </div>
        <div class="editor-field">
          <input class="text-box single-line" id="LastName" name="LastName" type="text" value="">
          <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
        </div>   
</fieldset>
    <p>
        <button type="submit" class="save ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" value="Save" role="button" aria-disabled="false"><span class="ui-button-text">Save</span><span class="ui-button-icon-secondary ui-icon ui-icon-disk"></span></button>

    </p>
</form>
<br/>

<button id="add">Add error</button>
<button id="remove">Remove error</button>

<br/>
<br/>
Debug:
<div id="debug"></div>

JavaScript:

var validator = {};

function addError(e) {
    validator.showErrors({
        "FirstName": "test error"
    });
}

function removeError(e) {
    validator.showErrors({
        "FirstName": null
    });
    fixValidFieldStyles($("form"), validator);
}

$(document).ready(function() {
    var $form = $("#experiment");
    // prevent form submission
    $form.submit(function(e) {
        e.preventDefault();
        return false;
    });
    $("#add").click(addError);
    $("#remove").click(removeError);
    $("#debug").html("<h1>Validator properties:</h1>");
    validator = $form.validate();
    validator.settings.showErrors = showErrors;
    for (var i in validator) {
        var row = $("<span></span>").html(i).append("<br/>");
        $("#debug").append(row);
    }
});


function showErrors(errorMessage, errormap, errorlist) {
    var val = this;
    errormap.forEach(function(error, index) {
        val.settings.highlight.call(val, error.element, val.settings.errorClass, val.settings.validClass);
        $(error.element).siblings("span.field-validation-valid, span.field-validation-error").html($("<span></span>").html(error.message)).addClass("field-validation-error").removeClass("field-validation-valid").show();
    });
}

function fixValidFieldStyles($form, validator) {
    var errors = {};
    $form.find("input,select").each(function(index) {
        var name = $(this).attr("name");
        errors[name] = validator.errorsFor(name);
    });
    validator.showErrors(errors);
    var invalidFields = $form.find("." + validator.settings.errorClass);
    if (invalidFields.length) {
        invalidFields.each(function(index, field) {
            if ($(field).valid()) {
                $(field).removeClass(validator.settings.errorClass);
            }
        });
    }
}