jQuery Validator 需要检查 Required onblur

Question

我正在使用 jQuery 验证器来验证包含 Kendo 文本框的 Razor 视图中表单上的字段。验证设置为模型上的数据注释。对于最大长度、电子邮件类型等验证，一切都运行良好。但是，在提交表单之前，我无法将此设置为必填字段的运行。我阅读的所有信息似乎都表明这是按设计工作的。好吧，我不希望用户必须执行 post-back 才发现他们遗漏了一个必填字段。当用户关闭文本框时，是否有任何方法可以在 jQuery 验证器中包含 data-val-required ？

我已尝试将以下内容添加到我的文档就绪函数中，但我似乎无法强制对元素进行验证：

$('#myForm').validate({
  onfocusout: function (element) {
    var required = $(element).attr('data-val-required');
    if (required) {
      $(element).attr('required', 'required');
      //alert('Element ' + $(element).attr('id') + ' ' + $(element).attr('required'));
      $(element).validate();
    }
});

此时，我什至会在页面加载时接受对整个表单的全面验证。我更习惯 Angular 和其中包含所有验证的 Breeze，所以我希望我只是错过了针对此问题的明显修复。

解决这个问题的是为了重新编辑输入。那里提出的解决方案将不起作用，因为我希望在输入输入之前进行验证——仅在 onblur 事件上——或者当用户在调用控制器方法之前单击提交按钮时进行特定的验证调用。我开始认为这是不可能的，并且真的希望我们使用的不是 Razor。还有其他可以轻松验证表单的东西吗？

感谢您的帮助！

Answer 1

Well, I don't want users to have to do a post-back just to find out that they left out one required field.

如果那是真的，那么进行任何 client-side 验证就没有意义了。换句话说，如果任何必填字段留空，此插件已经阻止发布到服务器。

Client-side 验证仅在所有验证规则都满足或 JavaScript 为 bypassed/disabled 时才允许发布到服务器。

that sort of addressed this subject was for re-editing an input. The solution posed there will not work...

不是，之前的提问者只认为他的问题是由re-editing输入引起的。但是，OP 只需要在 onkeyup 函数中从默认 "Lazy" 切换到 "Eager" 验证即可获得他需要的内容。为满足您的特定要求，只需在 onfocusout 回调函数中使用相同的技术即可。

onfocusout: function(element) {
    this.element(element); // validate element immediately
},

演示：http://jsfiddle.net/njfyey46/

您的尝试失败了，因为您在 .validate() 内调用了 .validate()； .validate() 仅用于初始化插件。要从回调函数中验证单个元素，您可以使用 the validator.element() method。在您的例子中，this 代表验证器。

此外，没有必要尝试确定该字段是否包含 required 属性。该插件已经自动确定满足了哪些规则并触发适当的回调函数。

Answer 2

以上答案在运行验证中有效，因此我将其标记为正确。但是，我遇到了另一个问题，可能是由于 Kendo 或其他一些助手干扰了 HTML 为输入设置的方式。出于某种原因，模型中数据注释为 [Required()] 的所有属性都有一个 data-val=true 属性，但没有必需属性。如果我添加了必需的属性（required="required"），那么@Sparky 的答案就完美无缺。否则，验证只是假定输入为空时有效。因此，我执行了以下操作以确保始终添加所需的属性并根据需要验证表单输入（并且表单将针对表单上的按钮进行验证——最终将从该列表中删除取消按钮）：

$(document).ready(function() {
    var formName = 'myForm';
    var form = $('#' + formName);
    if (form) {
        var $inputs = $('#' + formName + ' input[data-val=true]');
        $inputs.each(function () {
            this.required = true;
        });

        var $buttons = $('#' + formName + ' button');
        $buttons.each(function () {
            this.onclick = function () {
                var validator = $(this.form).validate();
                validator.form();
            };
         });

        form.validate({
            onfocusout: function (element) {
                //alert('Leaving ' + element.name + ' with id = ' + element.id + '. Is it valid? ' + element.validity.valid);
                this.element(element);
            }
        });
    }
});

jQuery Validator 需要检查 Required onblur

jQuery Validator needs to check for Required onblur

jquery

jquery-validate