令和の時代にjQueryでフォームのvalidationを行う

やむを得ずjQueryでフォームのvalidationを行う必要があったのでメモとして行った方法を残しておきます。

今の時代はReactやVue.jsなどの仮想DOMで簡単に行えるようになっているので、わざわざjQueryで行う必要はないのですが、どうしてもReactなどが使用できない環境でしたのでこちらの環境を使用しました。

使ったライブラリ

今回はjQuery Validation Pluginを使用しました。
思ってた１０倍は便利なライブラリでした

シンプルな使用方法

私はCDNから引っ張ってきたのでこちらを貼り付けるだけです。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

あとは、スクリプトで対象のformにvalidate関数を仕込んであげるだけです。

<form id=validationForm>
  <input name="mail">
  ....
</form>

<script type="text/javascript">
  $(function(){
    $('#validationForm').validate({
      rules: {
        name: {
          required: true
        },
        mail: {
          required: true,
          email: true,
        },
        mailConfirm: {
          email: true,
          equalTo : "#mail"
        },
        content: {
          required: true
        },
      },
      messages: {
        name: {
          required: '名前を入力してください。',
        },
        mail: {
          required: 'メールアドレスを入力してください。',
          email: '有効なメールアドレスを入力してください。'
        },
        mailConfirm: {
          required: '確認メールアドレスを入力してください。',
          email: '有効なメールアドレスを入力してください。',
          equalTo : 'メールアドレスが一致しません。'
        },
        content: {
          required: '内容を入力してください。',
        },
      },
    });
  });
</script>

rulesではrequiredやemailなどのプリセットのルールを仕込むことができますし、正規表現でvalidationをかけることもできます(私は使っていないので割愛します)
requiredはフォームが必須の場合に使用するルールです。
emailは有効なメールアドレスのvalidationをしてくれます
equalToは指定したinput(今回は#mail)と同一の内容かをチェックしてくれます。

messagesではvalidationに失敗した場合に表示するメッセージを設定することができます。

これで最低限の機能としての実装は終わりです。
こちらで動かすと、validation失敗時にinputタグの直下にラベルが追加されるようになります。

ここで、できればエラーは赤文字にしたいと思うかもしれません。そのためのオプション機能も用意してくれています。それがerrorPlacementとsuccessです。

<script type="text/javascript">
  $(function(){
    $('#validationForm').validate({
      rules: {
        ...
      },
      messages: {
        ..
      },
    },
    errorPlacement: function (error, element) {
      // あるinputのvalidationに失敗した際に呼ばれる。自分で表示をカスタマイズしたいときに使用する。
      // error はエラー時に表示するelement(例: <label>メールアドレスを入力してください。</label>)が入っている
      // element にはエラーが発生したelement(例: <input name="mail" ...>)が入っている

      // 一例: エラー発生inputの上にあるdivのclass名を --error に変える
      const errorElement = element.closest("div")
      errorElement.removeClass()
      errorElement.addClass('xxxxxx--error')

      // 赤文字で表示できるように定義済みのクラス .item__error を使用したエレメントを errorElement の中に append する
      const errorMessage = errorElement.children("p")
      const customErrorMessage = $($.parseHTML('<span class="item__error">' + error.text() + '</span>'));
      errorMessage.append(errorMessageNodes)
    },
    success: function(error, element) {
      // あるinputのvalidationに成功したときに呼ばれる。表示済みのエラーを削除する際に使用する。
      // error はエラー時に表示していたelement(例: <label>メールアドレスを入力してください。</label>)が入っている
      // element にはエラーが発生していたelement(例: <input name="mail" ...>)が入っている

      // divに装飾していたエラー用classを戻してあげる
      const errorElement = element.closest("div")
      errorElement.removeClass()
      errorElement.addClass('xxxxxx')

      // 赤文字で表示していたエラー内容を削除する
      const errorMessage = errorElement.children("p")
      errorMessage.children(".item__error").remove()
    });
  });
</script>

以上でうまくvalidationすることができました。