使用 jQuery 和验证插件进行条件选择
我有一个表单,正在使用 jQuery 验证插件进行验证。我想添加一个条件选择框(根据另一个选择框填充/显示的选择框)并使其验证。到目前为止,这是我所拥有的:
$(document).ready(function(){
$("#customer_information").validate({
//disable the submit button after it is clicked to prevent multiple submissions
submitHandler: function(form){
if(!this.wasSent){
this.wasSent = true;
$(':submit', form).val('Please wait...')
.attr('disabled', 'disabled')
.addClass('disabled');
form.submit();
} else {
return false;
}
},
//Customizes error placement
errorPlacement: function(error, element) {
error.insertAfter(element)
error.wrap("<div class=\"form_error\">")
}
});
$(".courses").hide();
$("#course_select").change(function() {
switch($(this).val()){
case "Certificates":
$(".courses").hide().parent().find("#Certificates").show();
$(".filler").hide();
break;
case "Associates":
$(".courses").hide().parent().find("#Associates").show();
$(".filler").hide();
break;
case "":
$(".filler").show();
$(".courses").hide();
}
});
});
HTML:
<select id="course_select">
<option value="">Please Select</option>
<option value="Certificates">Certificates</option>
<option value="Associates">Associates</option>
</select>
<div id="Form0" class="filler"><select name="filler_select"><option value="">Please Select Course Type</option></select></div>
<div id="Associates" class="courses">
<select name="lead_source_id" id="Requested Program" class="required">
<option value="">Please Select</option>
<option value="01">Health Information Technology</option>
<option value="02">Human Resources </option>
<option value="03">Marketing </option>
</select>
</div>
<div id="Certificates" class="courses">
<select name="lead_source_id" id="Requested Program" class="required">
<option value="">Please Select</option>
<option value="04">Accounting Services</option>
<option value="05">Bookkeeping</option>
<option value="06">Child Day Care</option>
</select>
</div>
到目前为止,选择对我有用,但即使选择了值,验证也认为该字段为空。
看起来 jQuery 有很多方法可以进行条件选择。这是我设法解决的最好方法(我是 jQuery 的新手),但我很想听听你们觉得什么是“最好”的方法,特别是如果它与验证插件配合得很好的话。谢谢!
I've got a form that I am validating with the jQuery validation plugin. I would like to add a conditional select box (a selection box that is populated/shown depending on the selection of another) and have it validate as well. Here is what I have so far:
$(document).ready(function(){
$("#customer_information").validate({
//disable the submit button after it is clicked to prevent multiple submissions
submitHandler: function(form){
if(!this.wasSent){
this.wasSent = true;
$(':submit', form).val('Please wait...')
.attr('disabled', 'disabled')
.addClass('disabled');
form.submit();
} else {
return false;
}
},
//Customizes error placement
errorPlacement: function(error, element) {
error.insertAfter(element)
error.wrap("<div class=\"form_error\">")
}
});
$(".courses").hide();
$("#course_select").change(function() {
switch($(this).val()){
case "Certificates":
$(".courses").hide().parent().find("#Certificates").show();
$(".filler").hide();
break;
case "Associates":
$(".courses").hide().parent().find("#Associates").show();
$(".filler").hide();
break;
case "":
$(".filler").show();
$(".courses").hide();
}
});
});
And the HTML:
<select id="course_select">
<option value="">Please Select</option>
<option value="Certificates">Certificates</option>
<option value="Associates">Associates</option>
</select>
<div id="Form0" class="filler"><select name="filler_select"><option value="">Please Select Course Type</option></select></div>
<div id="Associates" class="courses">
<select name="lead_source_id" id="Requested Program" class="required">
<option value="">Please Select</option>
<option value="01">Health Information Technology</option>
<option value="02">Human Resources </option>
<option value="03">Marketing </option>
</select>
</div>
<div id="Certificates" class="courses">
<select name="lead_source_id" id="Requested Program" class="required">
<option value="">Please Select</option>
<option value="04">Accounting Services</option>
<option value="05">Bookkeeping</option>
<option value="06">Child Day Care</option>
</select>
</div>
So far, the select is working for me, but validation thinks that the field is empty even when a value is selected.
It looks like there are a ton of ways to do conditional selects in jQuery. This was the best way I managed to work out (I'm new to jQuery), but I'd love to hear what you folks feel is the "best" way, especially if it works well with the validation plugin. Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
需要进行两处更改:
1)两个子选择框都分配了相同的名称属性,分配了不同的名称属性
每个选择框的属性(这将用于分配验证规则):
2)为验证方法选项中的每个子选择框添加所需的依赖关系规则,如下所示:
Two changes needed:
1)Both the child select boxes are assigned the same name attribute, assign a different
attribute for each select box (this will be used to assign validation rules):
2) Add a required dependency rule for each of the child select boxes in the validate method options as below: