exValidationで入力フォームの条件変化に対応する
アンケートなどの入力フォームで、チェックボックスでの条件分岐がしたい場合があると思います。
例えば「その他」を選んだ場合にのみ、テキスト入力を必須にしたいなどです。
今回は exValidation を使用した場合の例を記載いたします。
フォーム部分html
今回は「その他」項目のチェックボックスにidを振り、チェックがあるかないかを確認しています。
<form action="" id="form">
<div class="form_input" id="checkboxes">
<label>
<input type="checkbox" name="checkbox[]" value="チェックボックスa" id="checkbox_a">
チェックボックスa
</label>
<br>
<label>
<input type="checkbox" name="checkbox[]" value="チェックボックスb" id="checkbox_b">
チェックボックスb
</label>
<br>
<label>
<input type="checkbox" name="checkbox[]" value="その他" id="checkbox_other">
その他
</label>
<input size="20" type="text" name="その他を選んだ方" id="checkbox_other_text" />
</div>
<input type="submit" id="submit_btn" value=" 確認 " />
</form>script部分
「その他」項目（id = checkbox_other）のチェックがあれば、テキスト入力部分（id = checkbox_other_text）を必須入力にし、チェックが無ければ入力を不可にしています。
exValidation は要素の class に chkrequired があれば必須項目とします。ですので、チェックボックスのチェックがあれば、 class に chkrequired を追加し、チェックを外せば、 chkrequired を class から外す処理を記載しています。
それに伴い、テキスト入力部分を入力をできるようにしたり、チェックを外せば入力フォームを空にする処理を追加しています。
<script>
var validation = $("#form")
.exValidation({
// exValidation の設定部分です
rules: {
// チェックボックス自体を必須選択にしています
checkboxes: "chkcheckbox",
// checkbox_other_text を必須に設定しています
checkbox_other_text: "chkrequired"
},
errInsertPos: 'after',
errPosition: 'fixed'
});
var selectable = $('#pref').selectable({
callback: function() {
validation.laterCall('#pref');
}
});
// ページを読み込むときにチェックボックスを確認する
window.addEventListener('DOMContentLoaded',function(){
change_checkbox();
});
// チェックボックス checkbox_other の変化をチェックする
$('#checkbox_other').change(function() {
change_checkbox();
validation.laterCall('#checkbox_other_text');
});
// checkbox_other_text テキスト入力の入力変化をチェックする
$('#checkbox_other_text').change(function() {
validation.laterCall('#checkbox_other_text');
});
// ”その他”にチェックがある場合 checkbox_other_text の chkrequiredを追加あるいは削除する処理
function change_checkbox() {
const input = document.getElementById('checkbox_other_text');
const checkbox = document.getElementById('checkbox_other').checked;
if (checkbox == true) { // 「その他」にチェックがある場合
input.disabled = false; // テキスト入力欄を使用できるようにする
$('#checkbox_other_text').addClass('chkrequired');
} else if(checkbox == false) { // 「その他」にチェックがない場合
input.disabled = true; // テキスト入力欄を使用できないようにする
input.value = ''; // テキスト入力欄を空にする
$('#checkbox_other_text').removeClass('chkrequired');
}
}
</script>全ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- exValidation 関連JS css -->
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jQselectable.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.js"></script>
<script type="text/javascript" src="scripts/exvalidation.js"></script>
<script type="text/javascript" src="scripts/exchecker-ja.js"></script>
<link type="text/css" rel="stylesheet" href="css/exvalidation.css" />
</head>
<body>
<form action="" id="form">
<div class="form_input" id="checkboxes">
<label>
<input type="checkbox" name="checkbox[]" value="チェックボックスa" id="checkbox_a">
チェックボックスa
</label>
<br>
<label>
<input type="checkbox" name="checkbox[]" value="チェックボックスb" id="checkbox_b">
チェックボックスb
</label>
<br>
<label>
<input type="checkbox" name="checkbox[]" value="その他" id="checkbox_other">
その他
</label>
<input size="20" type="text" name="その他を選んだ方" id="checkbox_other_text" />
</div>
<input type="submit" id="submit_btn" value=" 確認 " />
</form>
<script>
var validation = $("#form")
.exValidation({
rules: {
checkboxes: "chkcheckbox",
checkbox_other_text: "chkrequired",
},
errInsertPos: 'after',
errPosition: 'fixed'
});
var selectable = $('#pref').selectable({
callback: function() {
validation.laterCall('#pref');
}
});
// ページを読み込むときにチェックボックスを確認する
window.addEventListener('DOMContentLoaded',function(){
change_checkbox();
});
// チェックボックス checkbox_other の変化をチェックする
$('#checkbox_other').change(function() {
change_checkbox();
validation.laterCall('#checkbox_other_text');
});
// checkbox_other_text テキスト入力の入力変化をチェックする
$('#checkbox_other_text').change(function() {
validation.laterCall('#checkbox_other_text');
});
// ”その他”にチェックがある場合 checkbox_other_text の chkrequiredを追加あるいは削除する処理
function change_checkbox() {
const input = document.getElementById('checkbox_other_text');
const checkbox = document.getElementById('checkbox_other').checked;
if (checkbox == true) {
input.disabled = false; // テキスト入力欄を使用できるようにする
$('#checkbox_other_text').addClass('chkrequired');
} else if(checkbox == false) {
input.disabled = true; // テキスト入力欄を使用できないようにする
input.value = ''; // テキスト入力欄を空にする
$('#checkbox_other_text').removeClass('chkrequired');
}
}
</script>
</body>
</html>