【问题标题】:jQuery validation fails when using .element(element) within custom method在自定义方法中使用 .element(element) 时,jQuery 验证失败
【发布时间】:2013-01-09 10:14:13
【问题描述】:

我有一个自定义规则,应该通过验证这个依赖项所依赖的其他输入来检查一些依赖项。当我对所有其他输入进行类似验证时,似乎都被忽略了。

这是我自定义的验证规则:

jQuery.validator.addMethod("checkDependencies", function (value, element) {
  var valid1 = jQuery('form#add-lottery-form').validate().element('#input-1');
  var valid2 = jQuery('form#add-lottery-form').validate().element('#input-2');

  if (valid1 && valid2) {
    return true;
  } else {
    return false;
  }

}, 'dependencie error');

我创建了一个 jsfiddle 来显示我的问题:
http://jsfiddle.net/AQcrW/

重现步骤:

  1. 在 input4 中输入一些内容(此输入是具有自定义规则“checkDependencies”的输入)[JavaScript 部分中的第 1 行]
  2. 由于 JS 第 2 行和第 3 行中的调用而显示 input1 和 input2 上的错误
  3. 在 input1 和 input2 中插入正确的值
  4. 点击提交
  5. !!认识到 input3 没有经过验证!!

重新运行小提琴

  1. 点击提交
  2. 所有字段都按预期进行验证

这是我的错还是 jQuery 验证中的错误?

【问题讨论】:

  • @salexch 对你有用吗?对我来说不是.. jsfiddle.net/6Qt8c 我的意思是你能得到错误信息“依赖错误”吗?
  • 是的。 jsfiddle.net/AQcrW/3 我更改了规则,请参阅.. 仍然无法正常工作.. 验证测试输入 1 tyr 输入 2 ytr 请仅输入数字。输入 3 ytr 请仅输入数字。输入 4 645 依赖错误

标签: javascript jquery validation jquery-validate


【解决方案1】:

经过一些调试和概述插件代码后,我找到了解决问题的方法。我扩展了验证器插件以便能够调用内部 .check(element) 函数。这个函数只返回真/假。它不是一个完美的解决方案,因为它在表单提交时做了两次,但至少到目前为止它可以工作......所以这是我添加的代码:

无需代码 - 阅读编辑!

jQuery.extend(jQuery.validator.prototype, {
    check: function (element)
    {
        return this.check(element);
    }
});

这是工作的fidde:
http://jsfiddle.net/HrPRL/

跟随我的想法,也许看看即将到来的讨论:
https://github.com/jzaefferer/jquery-validation/issues/579

编辑:
正如我现在意识到的那样,我的 非常酷 jQuery 扩展没有任何效果..
因为 .check() 方法是原型对象的一部分,您可以访问它。所以不需要上面的代码。

编辑 2:
这就是我最终的结果。它正在工作,但我认为可以优化一些东西。
有更好的想法吗?
http://jsfiddle.net/HrPRL/6/
我已经完成了.. 这足以满足我的意图:http://jsfiddle.net/HrPRL/8/

【讨论】:

  • @salexch 你能举个例子吗?我唯一看到(而且我已经知道)的是,当您在纠正依赖错误后没有关注无效字段时。我会处理这个
  • 试试这个..我没说它比你的好..jsfiddle.net/AQcrW/5它更通用
  • 我真的很喜欢这个,但又遇到了一个问题。在我在 github 上的第二篇文章(上面链接)中,我遇到了这个问题。 .valid() 正在重置所有发现的错误,之后可以在没有“input3”有效数据的情况下提交表单。感谢您分享您的方法!
  • 这仍然不起作用。尝试:在第四个输入中输入文本。在第一个和第二个输入中输入文本。点击提交
猜你喜欢
  • 1970-01-01
  • 2012-10-17
  • 2023-03-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-09
  • 1970-01-01
相关资源
最近更新 更多