必須の特定のフィールドがあるフォームを構築していますが、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--}
ご協力ありがとうございます。