Question

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

但是，其中一些字段需要服务器端验证。在HTML中手动在服务器上创建错误标签时会发生此问题。执行此操作时，错误标签将按预期显示，但行为是错误的。

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

我尝试过的事情：

在错误标签上设置generated="true"（无更改）
删除服务器端标签生成并返回错误代码，然后使用Validator对象在客户端创建标签，但行为是相同的（必须先按提交按钮删除标签并第二次提交表格）：
```
var validator = $( "#form ).validate();
validator.showErrors({
"password": "invalid password"
});
```

以下是服务器返回错误标签的示例表单（使用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>

Answer 1

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

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

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

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

修改：

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

请参阅：jqueryvalidation.org/remote-method/

Answer 2

对我而言，当我从服务器获取标记后显示自定义的错误消息时，它是有效的。

注意：错误的字段具有data-error-messages属性，错误消息由＆＃34;分开;＆＃34;：

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，获取具有此类名称的FIRST元素并突出显示它。 $ root包含搜索区域，其中寻找错误元素，因此如果具有相同的名称，则外部的其他元素将被突出显示为错误。

jQuery Validate不会在KeyUp

2 个答案: