我正在寻找一种验证多个相扑选择框的方法。我拥有的代码如下。
.HTML
<select class="kid-age form-select" id="edit-age-big-kid-1" name="age_big_kid_1">
<option value="">-</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="kid-age form-select" id="edit-age-big-kid-2" name="age_big_kid_2">
<option value="">-</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="kid-age form-select" id="edit-age-small-kid-1" name="age_small_kid_1">
<option value="">-</option>
<option value="3">0</option>
<option value="4">1</option>
<option value="5">2</option>
</select>
.JS
$('.kid-age').SumoSelect();
我如何在客户端验证所需的所有下拉列表(可能有多个)并显示一条消息"所有孩子年龄都是必需的"。
提前感谢!
这是快速简单的验证,但它会给你想法,你可以修改它以满足你的需求:
$(document).ready(function () {
$('.kid-age').SumoSelect();
$('#submit').on('click', function() {
errors=[];
$('p.SelectBox').each(function() {
if($(this).attr('title')==" -") {
errors.push('invalid');
}
});
if(errors.length>0) { // if there are errors, show message, stop submission, etc...
message='All kid ages are required.';
$('.error').text(message);
}
else { //if no errors, continue with script execution...
$('.error').text('fields validated');
}
});
});
插件创建一个特定的 p 标签(用于所有下拉列表),其中包含选定的选项......所以,你可以检查它的值,如果与' -'不同,继续脚本执行,否则会抛出错误。
查看实际操作:https://jsfiddle.net/g7bLbevy/