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

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

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

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

Answer 1

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

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

Answer 2

我认为您的代码比需要的更复杂。您应该只需要validate在文档就绪时调用（假设您的表单在文档就绪时存在）：

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n