【実現したい事】
ラジオボタンにてA,Bのどちらかを選んだとき、
特定のフィールドの必須項目を解除したり、再度必須項目にしたい。
特定のフィールドは配列でまとめておき、
下記の関数でフィールドを特定したのち「必須項目」か「通常項目」に変える。
//必須項目付与・解除の関数
function field_required_change(state,field_required_arry,field_arry){
for(var i = 0; i < state.fields.length;i++){
var event_field = state.fields[i];
//必須項目フィールドの配列に登録したフィールド名とevent_field.codeが一致したら、必須項目付与の作業を行う
if(field_required_arry.includes(event_field.code)){
var row_class_name = document.getElementsByClassName(‘row’)[event_field.rowCount].childNodes[0].className;
console.log(document.getElementsByClassName(‘row’)[event_field.rowCount].childNodes[0])
if (!event_field.validations.some(a => a.rule === ‘required’)) {
event_field.validations.push({rule: ‘required’});
// event_fieldのrequiredオプションで、必須項目に切り替え
event_field.required = true;
}
//通常項目フィールドの配列に登録したフィールド名とevent_field.codeが一致したら、必須項目解除の作業を行う
}else if(field_arry.includes(event_field.code)){
event_field.validations = event_field.validations.filter(a => a.rule !== ‘required’);
// event_fieldのrequiredオプションで、通常項目に切り替え
event_field.required = false;
}
}
}
動作例
フィールドA群 [A,B,C]
フィールドB群 [D,E]
チェックボックス（AまたはB）
Aを選んだ場合：必須フィールド [A,B,C] 通常フィールド[D,E]
Bを選んだ場合：必須フィールド[D,E] 通常フィールド [A,B,C]
【現状の挙動】
現状、画面上では必須項目のフィールドに表示される＊が消え
HTML上でもクラス名が「 ‘column el-form-item field required’（必須項目）」または
「 ‘column el-form-item field’（通常項目）」に切り替わるのは確認済みです。
【問題の挙動】
①必須項目から通常項目に切り替えたフィールドを空欄のまま回答すると
「必須項目です」のvalidationが表示されます。
②通常項目になるようclassNameを 'column el-form-item field’に切り替える指示も加えましたが、通常項目に切り替えたフィールドに空欄があると 'column el-form-item field error’に切り替わります
validation、.requiredで必須項目は解除しているのですが何故エラーが出るのかが分かりません。解決策を教えてください。