Question

我正在使用jQuery验证器来验证包含Kendo文本框的Razor视图中表单上的字段。验证被设置为模型上的数据注释。一切都适用于最大长度，电子邮件类型等验证。但是，在提交表单之前，我无法运行必填字段。我读过的所有信息似乎表明这是按设计工作的。好吧，我不希望用户必须进行回发，只是为了发现他们遗漏了一个必填字段。当用户选中文本框时，是否有任何方法可以在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，其中包括所有验证，所以我希望我错过了一个明显的解决这个问题的方法。

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

感谢您的帮助！

Answer 1

好吧，我不希望用户必须进行回复，只是为了发现他们遗漏了一个必填字段。

如果确实如此，那么进行任何客户端验证都没有意义。换句话说，如果任何必填字段留空，则此插件已禁止发布到服务器。

客户端验证仅允许在满足所有验证规则时或在绕过/禁用JavaScript时发布到服务器。

The previous question解决这个问题的方法是重新编辑输入。提出的解决方案将无效......

不，之前的提问者只认为他的问题是由重新编辑输入引起的。但是，OP只需要在onkeyup函数中从默认的“Lazy”切换到“Eager”验证，以获得所需的内容。要满足您的特定请求，只需在onfocusout回调函数中使用相同的技术。

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

DEMO：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

2 个答案: