19

我正在尝试使用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，我该怎么做才能解决它？

4

4 回答 4

18

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

$("form").validate()
$(yourElement).rules("add", {...})
于 2013-04-10T11:52:10.427 回答
1

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

于 2012-05-19T17:53:32.230 回答
1

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

setTimeout(function() {
    $(yourElement).rules("add", {...})
}, 100);
于 2015-06-16T09:48:54.203 回答
0

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

于 2014-08-01T15:48:37.957 回答