我有 3 个字段和按钮：
<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />
<input type="button" id="d" />
<label for="all_fields" class="error" style="display:none;">Please fill exactly one field</label>
我想使用 jquery 验证器插件来验证正是一个字段填充了文本。最好的方法是什么？
工作演示 for A / B / C案例：http: //jsfiddle.net/hfLwB/
行为：只要输入字段之一设置为 nu，她的值将允许计算发生，如果所有 3 个字段为空，则会出错。您还会注意到 class.at_least_one 和addMthod: require_from_group。
Anyhoo 代码应该说得更好。
好的链接：http ://docs.jquery.com/Plugins/Validation
希望能帮助到你 ：）
HTML
<form action="results.whatever" target="_blank" id="HULK">
<div style="clear:both">
<label for="a">A</label>
<div style="float:right">
<input name="a" type="text" class="at_least_one idleField"></div>
</div>
<div style="clear:both">
<label for="b">B</label>
<div style="float:right">
<input name="b" type="text" class="at_least_one idleField">
</div>
</div>
<div style="clear:both">
<label for="c">C</label>
<div style="float:right">
<input name="c" type="text" class="at_least_one idleField">
</div>
</div>
<div id="button">
<input name="" type="submit" value="Calculate" class="calc_button" style="cursor:hand">
</div>
</form>
<div id="errorContainer">
<h4>errors</h4>
<ol>
</ol>
</div>
代码
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
var numberRequired = options[0];
var selector = options[1];
var fields = $(selector, element.form);
var filled_fields = fields.filter(function() {
// it's more clear to compare with empty string
return $(this).val() != "";
});
var empty_fields = fields.not(filled_fields);
// we will mark only first empty field as invalid
if (filled_fields.length < numberRequired && empty_fields[0] == element) {
return false;
}
return true;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));
$(document).ready(function(){
var container = $('#errorContainer');
$("#HULK").validate( {
// We must to force validation of entire form because
// when we remove value from 2-nd field
// the 1-st field becomes invalid.
onfocusout: function() { $("#HULK").valid() },
onkeyup: function() { $("#HULK").valid() },
rules: {
// note: you can use variable to avoid repeating
// of the same code
a: {
number: true,
require_from_group: [1, ".at_least_one"]
},
b: {
number: true,
require_from_group: [1,".at_least_one"]
},
c: {
number: true,
require_from_group: [1,".at_least_one"]
}
},
success: function(label) {
label.html(" ").addClass("checked");
},
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
meta: "validate"
});
});
只是为@Tats_innit 帖子添加更多道具。
require_from_group对于 1.10.0 发布版本的github 上有一个未解决的additional-method-1.10.js问题jquery.validation。
github 问题： require_from_group 禁用其他规则
Smileyanp@github 在他的解决方案中引用了这篇文章，他在其中重用了@Tats_innit 的函数并创建了一个测试，表明它可以正常工作，并且不会禁用对之前定义的其他规则的验证require_from_group。
这篇文章在这里是为了节省时间，因为这个小细节花了 3 小时的谷歌搜索。
使固定：
只需在加载additional-method-1.10.js后更新或执行此代码additional-method-1.10.js（以覆盖函数）。
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
var numberRequired = options[0];
var selector = options[1];
var fields = $(selector, element.form);
var filled_fields = fields.filter(function() {
// it's more clear to compare with empty string
return $(this).val() != "";
});
var empty_fields = fields.not(filled_fields);
// we will mark only first empty field as invalid
if (filled_fields.length < numberRequired && empty_fields[0] == element) {
return false;
}
return true;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));
我试图将 require_from_group 用于 magento 站点，但即使使用此修复程序也无法使其正常工作。在浪费了太多时间之后，我使用其 html 中的 title 属性将其缩小到 magento。然后我遇到了这个jquery 验证，当输入字段具有标题属性时，而不是错误消息标题作为错误消息给出。
我希望这可以帮助其他人节省时间！