Question

我正在尝试使用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-Console上的错误：未捕获的TypeError：无法读取未定义的属性“设置”

它也在其他浏览器上出错。然后，我试图找出问题并找到：

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

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

为什么会导致TypeError，我该怎么做才能解决它？

Answer 1

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

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

Answer 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/

Answer 3

罪魁祸首是方法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/

Answer 4

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

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

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

4 个答案: