我正在使用出色的jQuery Validate插件來(lái)驗(yàn)證某些表單。在一個(gè)表單上，我需要確保用戶填寫(xiě)一組字段中的至少一個(gè)。我認(rèn)為我有一個(gè)很好的解決方案，并希望與大家分享。 請(qǐng)?zhí)岢瞿梢韵氲降娜魏胃倪M(jìn)。我沒(méi)有找到任何內(nèi)置方法來(lái)執(zhí)行此操作，因此搜索并找到了Rebecca Murphey的自定義驗(yàn)證方法，該方法非常有幫助。我通過(guò)三種方式對(duì)此進(jìn)行了改進(jìn)：讓您傳遞一組字段的選擇器為了讓您指定必須填充多少組才能通過(guò)驗(yàn)證一旦其中一個(gè)輸入通過(guò)驗(yàn)證，就將該組中的所有輸入顯示為通過(guò)驗(yàn)證。（請(qǐng)參閱對(duì)尼克·克雷弗大喊大叫。）因此，您可以說(shuō)“必須至少填充與選擇器Y匹配的X個(gè)輸入”。最終結(jié)果，像這樣的標(biāo)記：<input class="productinfo" name="partnumber"><input class="productinfo" name="description">...是這樣的一組規(guī)則：// Both these inputs input will validate if // at least 1 input with class 'productinfo' is filledpartnumber: { require_from_group: [1,".productinfo"] }description: { require_from_group: [1,".productinfo"]}項(xiàng)＃3假設(shè)您.checked在成功驗(yàn)證后將一類錯(cuò)誤消息添加到錯(cuò)誤消息中。您可以按照以下說(shuō)明進(jìn)行操作，如此處所示。success: function(label) { label.html(" ").addClass("checked"); }如同上面鏈接的演示中一樣，我使用CSS為每個(gè)span.errorX圖像提供背景，除非它具有class .checked，在這種情況下，它會(huì)得到一個(gè)選中標(biāo)記圖像。
3 回答
MMMHUHU
TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊
這是Nathan的出色解決方案。非常感謝。
這是一種使上面的代碼起作用的方法，以防有人像我那樣在集成時(shí)遇到麻煩：
Additional-methods.js文件中的代碼：
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
...// Nathan's code without any changes
}, jQuery.format("Please fill out at least {0} of these fields."));
// "filone" is the class we will use for the input elements at this example
jQuery.validator.addClassRules("fillone", {
require_from_group: [1,".fillone"]
});
html文件中的代碼：
<input id="field1" class="fillone" type="text" value="" name="field1" />
<input id="field2" class="fillone" type="text" value="" name="field2" />
<input id="field3" class="fillone" type="text" value="" name="field3" />
<input id="field4" class="fillone" type="text" value="" name="field4" />
不要忘了包含Additional-methods.js文件！
飲歌長(zhǎng)嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
不錯(cuò)的解決方案。但是，我遇到了其他必需規(guī)則不起作用的問(wèn)題。對(duì)表單執(zhí)行.valid（）對(duì)我來(lái)說(shuō)解決了這個(gè)問(wèn)題。
if(!$(element).data('being_validated')) {
var fields = $(selector, element.form);
fields.data('being_validated', true);
$(element.form).valid();
fields.data('being_validated', false);
}
湖上湖
TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊
謝謝肖恩。這解決了我的代碼忽略其他規(guī)則的問(wèn)題。
我還做了一些更改，以使“請(qǐng)至少填寫(xiě)一個(gè)字段..”消息顯示在單獨(dú)的div中，而不是在每個(gè)字段之后顯示。
放入表單驗(yàn)證腳本
showErrors: function(errorMap, errorList){
$("#form_error").html("Please fill out at least 1 field before submitting.");
this.defaultShowErrors();
},
將此添加到頁(yè)面中的某處
<div class="error" id="form_error"></div>
添加到require_from_group方法addMethod函數(shù)
if(validOrNot){
$("#form_error").hide();
}else{
$("#form_error").show();
}
......
}, jQuery.format(" (!)"));
- 3 回答
- 0 關(guān)注
- 742 瀏覽
添加回答
舉報(bào)
0/150
提交
取消