我正在构建一个表单，其中某些字段是必需的，但取决于 data-validate="required;" 指示的表单中的先前选择 属性。在我到达嵌套条件之前，我已经正常工作了，然后什么也没有发生。
我已经设置了每个操作来更改页面的背景颜色，就像 jQuery 正在工作的视觉指示器一样，所以我不需要每次都检查代码的数据验证属性。
我的完整代码如下 - 非工作代码从注释开始嵌套条件开始，我试图查看是否选中了特定复选框。选择后，该输入的类别从“折叠”变为没有类别，并出现一系列新字段。
{!--validation script--}
{if segment_2 =="request"}
<script type="text/javascript" src="{assets_url}js/livelyValidator_source.js"></script>
<link href="{assets_url}css/lively-validator.css" rel="stylesheet">
<script type="text/javascript" >
$( document ).ready(function() {
// check value of select.services_select
// then add data-validate="required;" to required fields
// if select changes remove from no longer required fields
// and add to the new fields
$('select#services_select').change(function() {
// assign the value to a variable, so we can do a conditional check
// set required attribute for sub forms
var selectVal = $('select#services_select :selected').val();
if(selectVal =="school") {
// set school required fields here
$('#school_services input[name="organization_name"], #school_services input[name="city"], #school_services input[name="state"], #school_services input[name="country"], #school_services select[name="district_schools"]').attr("data-validate", "required;");
$('body').css('background-color', '#c1c1c1');
// remove data-validate="required;" from other options
$('#individual_services input, #district_services input').removeAttr("data-validate");
}
else if(selectVal =="district") {
// set district required fields here
$('#district_services input[name="organization_name"], #district_services input[name="city"], #district_services input[name="state"], #district_services input[name="country"], #district_services select[multiple="multiple"]').attr("data-validate", "required;");
// body class is temporary just to prove that conditional is working
$('body').css('background-color', 'yellow');
// remove data-validate="required;" from other options
$('#individual_services input, #school_services input').removeAttr("data-validate");
}
else if(selectVal =="teacher") {
// set teacher required fields here
$('#individual_services input[name="mailing_city"], #individual_services input[name="mailing_state"], #individual_services input[name="mailing_country"]').attr("data-validate", "required;");
// body class is temporary just to prove that conditional is working
$('body').css('background-color', 'green');
// remove data-validate="required;" from other options
$('#district_services input, #school_services input').removeAttr("data-validate");
//begin nested conditional to check teacher affiliation
$('input[name="affiliated"]').change(function() {
// assign the value to a variable, so we can do a conditional check
var affiliatedVal = $('input[name="affiliated"]:checked').val();
// set required attribute for sub fields
// set school required fields here
// this line should check if affiliatedVal does not have class collapsed but it doesn't work
if(!$(affiliatedVal).hasClass('collapsed')) {
$('#school_info input[name="city"], #school_info input[name="state"], #school_info input[name="country"]').attr("data-validate", "required;");
$('body').css('background-color', 'pink');
}
else if(affiliatedVal =="district") {
// set district required fields here
}
else if(affiliatedVal =="organization") {
// set organization required fields here
}// end nested conditional
});
}// end outer conditional
});
});
$(document).ready( function(){ $('#request-services').livelyValidator(); });
</script>
{/if}
{!-- end validation script--}
感谢你的协助。