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

Jquery validation - Error on adding rules to input element?

提问by Yugal Jindle

I am trying to implement Jquery validation with http://docs.jquery.com/Plugins/Validation:

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

My design plan:

我的设计方案：

• My inputelement:

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

• Then, on dom ready:

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

• Validate method:

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

• 我的输入元素：

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

As per my expectations, it should display error message in the place holder span in the form.

按照我的期望，它应该在表单的占位符跨度中显示错误消息。

But, Problem

但是，问题

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

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

It is also giving error on other browsers. Then, I tried to figure-out the problem and found:

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

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

As, per my understanding and documentation -> This should be correct.

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

Why would this cause the TypeError and what can I do to resolve it?

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

回答by holamon

You have to add the rules after you call the validate plugin in the form element:

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

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

回答by Andrew Whitaker

I think your code is more complicated than it needs to be. You should just have to call validateon document ready (assuming your form exists on document ready):

我认为你的代码比它需要的更复杂。您应该只需要调用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();
        }
    });
});?

Example:http://jsfiddle.net/4vDGM/

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

You could also just add a class of requiredto required elements instead of adding them via JavaScript.

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

Another thing you could do is add rules in the rules object of validate's options:

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

$(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();
        }
    });
});?

Example:http://jsfiddle.net/GsXnJ/

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

回答by jonnybradley

I was trying to modify the rules on a form that already had validation being set up, but i found my $(document).ready(...) code was executing before the main form validation was set up, so adding a short setTimeout cured this issue for me - e.g.

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

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

回答by Chandrew

The culprit is the method delegate(), which does not check whether a validator exists:

罪魁祸首是方法 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);
}

I was searching for a solution and found it in a blog post.

我正在寻找解决方案并在博客文章中找到它。

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

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