我正在構建一個表單,其中有一些必需的字段,但取決於data-validate =「required」指示的形式中的先前選擇;屬性。我有這個工作正常,直到我到達嵌套條件,然後沒有任何反應。在jquery中嵌套的條件不起作用
我已經設置了每個動作來改變頁面的背景顏色,就像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--}
感謝您的協助。
1)用呈現的html創建一個jsfiddle.net。 2)使用console.log看看值是什麼 – mplungjan