ワードプレスのWP MW FORMは、独自にvalidateができるのだけど、訳があってでこちらのvalidationを使わずに、独自のvalidateをつけることになった。そうなると、候補としては「jquery.validate.js」がワタシの中では筆頭。設置も簡単で、カスタマイズも豊富。ただ、ラジオボタンの値によって条件分岐を入れる必要があって、WEBで検索して独自に設置してみたが、送信機能が動かない(バリデート自体は出来ているが、入力が完了していないとみなされているっぽい)。いくら調べても、その動かないバージョンしか出てこないので、chatGPTに頼ってみることにした。
因みに送信できなかった記述は下記、または下記と類似の記述方法です。ただ、この書き方は一般的なようで、今回に限って動かなかったのかもしれません。
$('form').validate({
rules: {
'email': {
required: {
depends: function(){
if ($('[name=entry]').val() == 'yes') {
return true;
} else {
return false;
}
}
}
},
}
});
最初は「jquery.validate.jsを使って条件分岐付きのバリデーションをしたい」から開始。エラーが出るたびに会話で伝えて、完成したのがこちらです。
<!DOCTYPE html>
<html>
<head>
<title>バリデーションの例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
</head>
<body>
<form id="myForm">
<div>
<input type="radio" id="inputMethod1" name="会計処理方法" value="自動計算">
<label for="inputMethod1">自動計算</label>
</div>
<div>
<input type radio" id="inputMethod2" name="会計処理方法" value="自分で入力作業を行う">
<label for="inputMethod2">自分で入力作業を行う</label>
</div>
<div id="softwareNameContainer" style="display: none;">
<input type="radio" id="softwareName1" name="会計ソフト名" value="ソフト1">
<label for="softwareName1">ソフト1</label>
<input type="radio" id="softwareName2" name="会計ソフト名" value="ソフト2">
<label for="softwareName2">ソフト2</label>
</div>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function () {
// カスタムルールを追加
$.validator.addMethod("require_from_group", function (value, element, options) {
var $fields = $(options[1], element.form),
validFields = $fields.filter(function () {
return $(this).val();
});
// 有効なフィールドの数が指定の数以上であれば true を返す
return validFields.length >= options[0];
}, "会計処理方法が「自分で入力作業を行う」場合、会計ソフト名は必須です.");
// バリデーションの設定
$("#myForm").validate({
rules: {
"会計処理方法": "required",
"会計ソフト名": {
require_from_group: [1, 'input[name="会計処理方法"]'],
}
},
messages: {
"会計ソフト名": "会計処理方法が「自分で入力作業を行う」場合、会計ソフト名は必須です."
},
submitHandler: function (form) {
form.submit();
}
});
// 会計処理方法の変更時に会計ソフト名の表示を切り替える
$('input[name="会計処理方法"]').on('change', function () {
if ($(this).val() === '自分で入力作業を行う') {
$('#softwareNameContainer').show();
$("#softwareNameContainer :input").attr("required", true);
} else {
$('#softwareNameContainer').hide();
$("#softwareNameContainer :input").removeAttr("required");
}
});
});
</script>
</body>
</html>
実際のJSは下記。上記を参考に、自分の環境に合わせて少し変更しています。
$('input[name="会計処理方法"]').on('change', function () {
if ($(this).val() === '自分で入力作業を行う') {
$('.open-area').css('display','block');
$('.open-area :input').attr("required", true);
} else {
$('.open-area').css('display','none');
$('.open-area :input').removeAttr("required");
}
});
// カスタムルールを追加
$.validator.addMethod("require_from_group", function (value, element, options) {
var $fields = $(options[1], element.form),
validFields = $fields.filter(function () {
return $(this).val();
});
// 有効なフィールドの数が指定の数以上であれば true を返す
return validFields.length >= options[0];
}, "会計処理方法が「自分で入力作業を行う」場合、会計ソフト名は必須です.");
$('form').validate({
rules: {
'会計処理方法': {
required: true,
},
'会計ソフト名': {
require_from_group: [1, 'input[name="会計処理方法"]'],
},
},
messages: {
'会計処理方法': {
required: '必須項目です。入力してください。',
},
"会計ソフト名": "会計処理方法が「自分で入力作業を行う」場合、会計ソフト名は必須です."
},
errorPlacement: function(error, element){
error.insertBefore(element);
},
})
GTPのコードには入っていませんが、「require_from_group」というメソッドを利用するために、下記を読み込んでいます。(エラーが出ていることを伝えたら、追加の読み込みが必要かも、と教えてくれました。)
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js
jquery-validateのバージョンによってもこのあたりは変わってくるかもしれません。