jQuery Validate 不会清除 KeyUp 上服务器插入的错误消息答案

【问题标题】：jQuery Validate won't clear server-inserted error messages on KeyUpjQuery Validate 不会清除 KeyUp 上服务器插入的错误消息
【发布时间】：2015-07-16 22:27:36
【问题描述】：

我们正在使用 JQuery Validate 插件来进行简单的字段验证。使用默认的客户端验证时，一切都按预期工作。

但是，其中一些字段需要服务器端验证。以 HTML 格式在服务器上手动创建错误标签时会出现此问题。这样做时，错误标签会按预期显示，但行为是错误的。

本质上，一旦显示错误标签，它就不会在字段的 KeyUp 事件中被删除。只有当你按下提交按钮时它才会被删除，并且第一次按下提交按钮只会隐藏错误标签并将输入字段设置为有效。您必须再次按下提交按钮才能实际提交表单。似乎 JQuery validate 知道错误标签及其连接的输入字段，否则按下提交按钮时它不会被隐藏。

我尝试过的事情：

在错误标签上设置generated="true"（无变化）
删除服务器端标签生成并返回错误代码，然后使用 Validator 对象在客户端创建标签，但行为是相同的（必须先按提交按钮才能删除标签，然后再按提交表格的时间）：
var 验证器 = $( "#form ).validate(); 验证器.showErrors({ “密码”：“无效密码” });

这是一个带有服务器返回错误标签的示例表单（使用 Thymeleaf）：

    <div class="form-group">
    <label for="password" class="ex-label" th:text="#    {common.password}">Password</label>
    <input id="password" name="password" type="password" class="form-control ex-input-modal required" /> 
    <label th:if="${passFail}" for="password" class="error"> Wrong password     </label>
    </div>

【问题讨论】：

我不确定您的期望。 jQuery Validate 是一个 client-side 脚本，因此您不能期望它对服务器生成的消息有任何作用。该插件会自动生成并切换其自己的错误消息标签。这个想法是，安装插件后，用户将永远不会看到服务器端验证。服务器端验证只会在 JavaScript 被禁用或绕过时保护您。
由于在 jQuery Validate 得到满足之前您无法将表单提交到服务器，所以您怎么会首先看到任何服务器生成的验证消息？
它确实以某种方式识别服务器生成的标签，因为它会在 OnBlur 或表单提交事件中清除它们。同样，如果我以编程方式在字段上调用 Validate()，标签将被删除。
就无法看到服务器验证消息而言，在满足客户端验证并提交表单后，服务器端标签会在页面加载时的 html 中返回（例如: 邮箱地址字段格式正确，允许提交表单，但是在服务器上判断邮箱地址已经存在，服务器返回错误标签）
无论如何，客户端插件无法自动处理您的服务器端验证消息......这不是它的预期目的。请参阅remote 方法。

标签： jquery jquery-validate

【解决方案1】：

标题：jQuery Validate 不会清除 KeyUp 上服务器插入的错误消息

它不是为此而设计的，因为它是一个客户端端脚本。

jQuery Validate 插件通过 JavaScript 在客户端生成并切换其自己的验证错误消息。由于在满足 jQuery Validate 之前，您无法将表单提交到服务器，因此您将不会首先看到任何服务器生成的验证消息。

当与客户端验证一起使用时，在正常情况下永远不会看到服务器端验证消息......服务器端验证只会在 JavaScript 被禁用、破坏或绕过的情况下保护您。

编辑：

如果您尝试评估系统中是否已经存在电子邮件地址、用户帐户或任何内容，那么您将使用插件的内置 remote 方法。此规则将使用ajax() 调用服务器端脚本，如果您的服务器端脚本返回true，则该规则通过验证。如果您的脚本返回 false 或 JSON 编码字符串，则规则验证失败。如果您使用false，则使用默认错误消息。如果您返回一个 JSON 字符串，例如 “john smith is already in use”，那么插件将使用该字符串作为错误消息。

见：jqueryvalidation.org/remote-method/

【讨论】：

在满足客户端验证并提交表单后，在页面加载时的 html 中返回服务器端标签（例如：电子邮件地址字段格式正确，因此允许表单提交。但是在服务器上判断该邮箱地址已经存在，服务器返回错误标签）
@looselycoupled，该插件有一个用于该确切目的的方法，称为remote。见：jqueryvalidation.org/remote-method
是的，我看到了。问题之一是我们想要在用户尝试删除其帐户时验证密码等内容。在这种情况下，我们不希望在每次键入时在服务器上进行持续的密码检查。我们只想在他们提交表单后返回错误消息。
@looselycoupled，您可以使用自定义函数有条件地禁用onkeyup。
这里有一个帖子的链接，其他人正在遵循服务器生成的标签范例，它似乎对他有用，将 generate="true" 设置为参数：github.com/jzaefferer/jquery-validation/issues/430

【解决方案2】：

对我来说，当我自定义从服务器获取标记后显示的错误消息时，它起作用了。

注意：错误字段有data-error-messages属性，带有错误信息，用“;”分隔：

this.showErrorMessages = function($root) {
    var handlerInstance = this;
    var validator = $(handlerInstance.instance.form).validate();
    var originalErrorMap = validator.errorMap;
    var originalErrorList = validator.errorList;
    var errorMap = {};
    var errorList = [];
    $root.find('[data-error-messages]').each(function() {
        var errorMessages = $(this).attr('data-error-messages').split(';');
        var propertyName = $(this).attr('name');
        for (var i = 0; i < errorMessages.length; i++) {
            errorMap[propertyName] = errorMessages[i];
            errorList.push({ message: errorMessages[i], element: $(this).get(0) });
        }
    });
    validator.errorMap = errorMap;
    validator.errorList = errorList;
    validator.showErrors();
    validator.errorMap = originalErrorMap;
    validator.errorList = originalErrorList;
};

为什么我必须手动分配 errorList - 因为否则如果我有其他具有相同名称的元素 - 默认验证方法将自行找出 errorList，采用具有此类名称的第一个元素并突出显示它。 $root 包含搜索区域，在该区域中查找错误元素，因此如果名称相同，则外部的其他元素不会被突出显示为错误。

【讨论】：