chatGPTとしつこく会話してjquery.validate.jsで必須項目の条件分岐を完成させたよ

2023.11.03
jQuery・JS wordpress

ワードプレスの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のバージョンによってもこのあたりは変わってくるかもしれません。