javascript - 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
         });
   }
  

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

但是，问题

Error on Chrome-Console: Uncaught TypeError: Cannot read property 'settings' of undefined

在其他浏览器上也会出现错误。然后我尝试找出问题所在，发现:

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

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

为什么这会导致 TypeError 以及我该如何解决它？

Answer 1

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

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