【问题标题】:jQuery validation simplificationjQuery 验证简化
【发布时间】:2015-09-18 16:25:25
【问题描述】:

我想使用错误消息,但不必为每个表单写出消息,这个网站上有 20 多个。表格都有这样的结构:

   <li>
        <label for="firstName">First Name*</label>
        <input name="firstName" id="firstName" type="text">
    </li>

    <li>
        <label for="lastName">Last Name*</label>
        <input name="lastName" id="lastName" type="text">
    </li>

我有以下验证规则:

$.validator.messages.required = function (param, input) {
    msg = $("input").prev("label").eq(0).text();
    return 'Please fill out the ' + msg + ' required field.';
 }

这会从第一个错误字段的标签中为每个错误插入文本。在此之前,它为每个错误创建了一个字符串,其中包含每个错误字段的标签“请填写名字、姓氏(等)必填字段。”

如何获取每个错误类的前一个标签并使用该文本?我不能让 .each() 在这里工作。谢谢。

这里是fiddle

【问题讨论】:

  • 你有 jsfiddle 吗?
  • 是的,我添加了原始问题的链接
  • 您应该将您的.validate() 方法包含在click 处理程序中!它属于 DOM 就绪事件处理程序,因为它仅用于初始化。
  • 表单是通过 ajax 引入的,必须使用点击处理程序。
  • 我可以理解,如果点击处理程序是用于引入表单的按钮。但是,您的点击处理程序是针对表单本身的提交按钮的!没有意义。

标签: jquery jquery-validate


【解决方案1】:

将选择器从 $("input") 更改为 $(input)。前者是所有&lt;input&gt; 元素的选择器...后者是使用input 函数参数的选择器,该参数表示正在验证的当前 元素。

msg = $(input).prev("label").text();

演示:http://jsfiddle.net/n2cL6u7j/1/

注意:删除 click 处理程序并将其替换为 DOM 就绪事件处理程序。 .validate() 方法仅用于初始化插件,因此它只需要在 DOM 就绪时调用一次。否则,当表单加载到页面上时,它会被调用一次。在您的 jsFiddle 中,每次单击表单本身的提交按钮时,您都会调用 .validate(),这没有任何意义。



原答案: (有一些问题)

只需使用errorPlacement 选项来操作required 规则的消息,如下所示...

errorPlacement: function (error, element) {
    if (error.text() === "required") { // <- only when the 'required' rule is used
        lbl = $(element).prev('label').text();
        error.text('Please fill out the ' + lbl + ' required field.');
    }
    error.insertAfter(element); // <- default placement
},

由于我的条件是查看required 规则的“必需”消息,因此我在全局范围内更改了该消息。这样做只是为了简化我的条件,您可以完全跳过它。

$.validator.messages.required = function (param, input) {
    return 'required';
}

演示:http://jsfiddle.net/jhdo83f8/

【讨论】:

  • 它只是返回“必需”,但你的小提琴可以工作,所以我搞砸了。但是我无法将消息与输入内联,我需要像上面那样将它们放在单独的 div 中。
  • 我很欣赏这个非常简单的修复,使用 $(input) vs $("input")。这也是关于点击处理程序的一个很好的建议,除了我第一次在下面评论时提到它,表单是通过 AJAX 引入的,所以你必须将它绑定到按钮点击,它在 DOM 准备好时不存在。不过还是谢谢。
  • @DirtyBirdDesign,正如我试图解释的那样......当点击处理程序绑定到表单本身的提交按钮时,它怎么可能还不存在?您的 jsFiddle 的构造方式,每次单击提交按钮时都会调用 .validate()
【解决方案2】:

试试这个:

$("input").each(function(i,op)
{
   alert($(this).prev("label").text());      
});

【讨论】:

  • 与 jQuery Validate 插件无关。
  • 这只是一个片段,您可以通过迭代每个输入控件来获取标签文本。
  • 他不需要遍历任何东西。他只需要 label 来验证正在验证的字段。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-13
  • 2014-06-23
相关资源
最近更新 更多