Jquery 验证 - 向输入元素添加规则时出错？答案

【问题标题】：Jquery validation - Error on adding rules to input element?Jquery 验证 - 向输入元素添加规则时出错？
【发布时间】：2012-05-18 10:52:31
【问题描述】：

我正在尝试使用 http://docs.jquery.com/Plugins/Validation 实现 Jquery 验证：

我的设计方案：

我的输入元素：

<form action="submit.php" id="form_id">
  <input type="text" class="val-req" id="my_input" name="myval" />
  <input type="button" onclick="validate_form('form_id', function() { $('#form_id').submit(); })" />
  <span id="val-msg" class="my_input"></span>
</form>

然后，在 dom 准备就绪时：

  $(document).ready(function() {
                      $('.val-req').rules('add', {required:true});
                   });

验证方法：

 function validate_form(form_id, callback) {
       var form = $('#'+form_id);
       $('.val-req').each(function() {$(this).rules('add', {required:true});});
       $(form).validate({
                errorElement: "span",
                errorClass:   "val-error",
                validClass:   "val-valid",
                errorPlacement: function(error, element) {
                                      $('#val-msg.'+$(element).attr('id')).innerHTML(error.html());
                               },
                submitHandler: callback
       });
 }

按照我的预期，它应该在表单的占位符范围内显示错误消息。

但是，问题

Chrome 控制台上的错误：未捕获的类型错误：无法读取未定义的属性“设置”

在其他浏览器上也会报错。然后，我试图找出问题并发现：

 $('.val-req').rules('add', {required:true});   # This is causing the error

根据我的理解和文档 -> 这应该是正确的。

为什么这会导致 TypeError，我可以做些什么来解决它？

【问题讨论】：

仅供参考，我已经开始讨论这个问题here。
有一个混乱 - 一个错字解决了这个问题。我否认这一点。我在写问题时打错了字，后来更正了——但这根本不是问题。
问题仍然存在，我完全不知道我的实现出了什么问题。
@AndrewWhitaker 感谢先生的努力。 Stackoverflow 真的是一个有价值的社区！
没问题——我已经添加了一个希望能有所帮助的答案。

标签： javascript jquery jquery-validate

【解决方案1】：

您必须在表单元素中调用验证插件后添加规则：

$("form").validate()
$(yourElement).rules("add", {...})

【讨论】：

刚遇到同样的问题，忘了$("#formid").validate()

【解决方案2】：

我认为您的代码比它需要的更复杂。您只需要在准备好文档时致电validate（假设您的表单存在于文档就绪上）：

$(document).ready(function() {
    $(".val-req").addClass("required");
    $("#form_id").validate({
        errorElement: "span",
        errorClass: "val-error",
        validClass: "val-valid",
        errorPlacement: function(error, element) {
            $('#val-msg.' + $(element).attr('id')).html(error.html());
        },
        submitHandler: function () {
            this.submit();
        }
    });
});

示例： http://jsfiddle.net/4vDGM/

您也可以只向所需元素添加一个 required 类，而不是通过 JavaScript 添加它们。

您可以做的另一件事是在validate 的选项的规则对象中添加规则：

$(document).ready(function() {
    $("#form_id").validate({
        rules: {
            myval: "required"
        },
        errorElement: "span",
        errorClass: "val-error",
        validClass: "val-valid",
        errorPlacement: function(error, element) {
            $('#val-msg.' + $(element).attr('id')).html(error.html());
        },
        submitHandler: function () {
            this.submit();
        }
    });
});

示例： http://jsfiddle.net/GsXnJ/

【讨论】：

嗯，但我有一个自定义提交方法，它使用 div 按钮的 ajax onclick 事件提交值。另外，我不希望在我的输入中使用require 类，因为我希望它是 val-req，以及类似的 val-email 等等！
我无法在验证方法中添加内联规则，因为相同的代码将用于验证具有 n 个字段的 20 个表单。如果我这样做，它实际上会破坏目的。
@YugalJindle：啊，好吧。在这种情况下，您只需为按钮上的“单击”添加一个事件处理程序并以这种方式提交表单。
我的意思是我有不同的表单和不同的提交逻辑，但我会将这些提交方法作为回调传递给这个validate_form 方法，并希望保持验证独立于表单本身。
我希望对多个表单的验证进行概括，这就是我需要这种活力的原因。

【解决方案3】：

我试图修改已设置验证的表单上的规则，但我发现我的 $(document).ready(...) 代码在设置主表单验证之前正在执行，因此添加一个简短的 setTimeout 为我解决了这个问题 - 例如

setTimeout(function() {
    $(yourElement).rules("add", {...})
}, 100);

【讨论】：

【解决方案4】：

罪魁祸首是方法delegate()，它不检查验证器是否存在：

function delegate(event) {
  var validator = $.data(this[0].form, "validator"),
  eventType = "on" + event.type.replace(/^validate/, "");
  // this fixes handling the deleted validator:
  if (!validator) return;
  validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
}

我正在寻找解决方案，并在一篇博文中找到了它。

来源：http://devio.wordpress.com/2012/07/18/fixing-jquery-validation-with-changing-validators/

【讨论】：