令和の時代にjQueryでフォームのvalidationを行う
Published: 2022-05-11 03:53:31

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

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

# 使ったライブラリ
今回は[jQuery Validation Plugin](https://jqueryvalidation.org/)を使用しました。
思ってた１０倍は便利なライブラリでした

# シンプルな使用方法
私は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タグの直下にラベルが追加されるようになります。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40azbji29io6b8bx8h4l.png)

ここで、できればエラーは赤文字にしたいと思うかもしれません。そのためのオプション機能も用意してくれています。それが`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することができました。