jQuery 验证简化
jQuery validation simplification
我想使用错误消息,但不必为每个表单写出消息,这个站点上有 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.';
}
这会为每个错误插入第一个错误字段标签中的文本。在此之前,它为每个错误创建了一个字符串,其中包含每个错误字段的标签“请填写名字,姓氏,(等)必填字段。'
如何获取每个错误的前一个标签 class 并使用该文本?我无法让 .each() 在这里工作。谢谢
这里是 fiddle.
试试这个:
$("input").each(function(i,op)
{
alert($(this).prev("label").text());
});
将选择器从 $("input")
更改为 $(input)
。前者是所有 <input>
元素的选择器...后者是使用 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
规则的 "required" 消息,因此我全局更改了该消息。这只是为了简化我的条件,你可以完全跳过它。
$.validator.messages.required = function (param, input) {
return 'required';
}
我想使用错误消息,但不必为每个表单写出消息,这个站点上有 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.';
}
这会为每个错误插入第一个错误字段标签中的文本。在此之前,它为每个错误创建了一个字符串,其中包含每个错误字段的标签“请填写名字,姓氏,(等)必填字段。'
如何获取每个错误的前一个标签 class 并使用该文本?我无法让 .each() 在这里工作。谢谢
这里是 fiddle.
试试这个:
$("input").each(function(i,op)
{
alert($(this).prev("label").text());
});
将选择器从 $("input")
更改为 $(input)
。前者是所有 <input>
元素的选择器...后者是使用 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
规则的 "required" 消息,因此我全局更改了该消息。这只是为了简化我的条件,你可以完全跳过它。
$.validator.messages.required = function (param, input) {
return 'required';
}