jQueryで実装するフォームバリデーション

KojimaKohei

2020年4月29日 22:41

HTML5では、type属性を指定すれば自動でバリデーションがかかったり、requiredを指定するだけで入力チェックをかけることが可能です。

HTML5の入力検証機能はとっても簡単に導入できるのですが、下記のようなデメリットのため、使わないことの方が多いです。

・ブラウザによってエラーの表示内容が異なる
・JSで組んだ方がカスタマイズしやすい

date,search,number,range,colorなどはいまだにIEやsafariが対応してなかったりするみたいなので、その他のtype属性は合わせておいた方が無難かなーと思っています。

今回、jQueryを使ってバリデーションチェックを作る機会があったので、忘備録的に書いておきたいと思います。

少しでも参考になれば幸いです。

まずは、HTML5だけで実装してみた

HTML5だけで実装するとこんな感じ。

未入力チェックに関してはrequired属性をつけているので、そのまま送信ボタンを押すと吹き出しにエラーメッセージが表示されるかと思います。

こんな感じで、未入力チェックが簡単にできて便利ですね！

inputタグには、validとinvalidのセレクターに対して、ボーダーをつけてます。それぞれ、エラーがない状態と未入力チェックがかかっている状態の時にスタイルをあてることで、わかりやすくしてます。

  
   &:valid {
   border: 1px solid green;
     //エラーがない状態
   }
   &:invalid {
     border: 1px solid red;
     //未入力チェックとして required を指定しているフィールドに適用される
   }

ただ、チェックボックスについては問題があって、

１つ以上チェックして欲しかったとしても、未入力チェックが上手く動作してくれない。

その辺りの柔軟性に欠けます。（ラジオボタンのチェックは動くけど、チェックボックスは上手く動かない）

「プライバシーポリシーに同意する」のように、チェックボックスが一つだけの場合なんかは使えそうです。

pattern属性には、正規表現を入れてチェックできます。

正規表現のパターンについては、こちらのサイトが参考になりました↓

表示されるエラーメッセージはブラウザによって固定されており、メッセージ内容をカスタマイズするには結局JSを使わないといけません。。

どのブラウザで見ても、同じメッセージ、スタイルで表示させたいのであれば初めからJSを使っておくのがいいかも？

jQueryでフォームバリデーション

まず、
form要素に novalidate属性を追加すると、妥当性のチェック（入力内容の検証）を無効にすることができます。

requiredやpattern属性を設定しなくても、emailなどのtype属性を指定すると、標準で妥当性チェックが入ります。

ブラウザごとにメッセージやスタイルが違うので、nobalidateで無効にしつつ、JavaScriptで実装していきます。

<form action="" id="form" class="form" novalidate>

フォームがsubmitされた時、入力内容をチェックし、値が空だったら「必須入力です」とメッセージを表示するという簡単な仕様です。

その際、同時にerrorsというクラス名を付与していて、最終的にerrorsというクラスが存在していれば、フォームの送信を「return false」で停止するという流れです。

    if(error_class.length > 0) {
     return false;
   }

メールアドレスや電話番号も同じような方法なので、関数にして使いまわしています。日本語にするとこんな感じです。

・値が空であれば「必須」のメッセージ
・正規表現にマッチしない値であれば「形式通りに入力してください」のメッセージ
・そうでなければ、エラー表示しない

ちょっと違うのがチェックボックスのチェックです。

チェック条件は「１つ以上チェック必須」にしたいので、このようなコードになりました。

    //チェックボックスの必須チェック（１つ以上）
   $('input[type="checkbox"]').each(function () {
     let checkedsum;
     let name = $(this).attr('name');
     checkedsum = $("input[name='" + name + "']:checked").length;
     if (checkedsum > 0) {
       $(this).parent().removeClass(error_class);
       $(this).parent().find('span').text('');
     } else {
       $(this).parent().addClass(error_class);
       $(this).parent().find('span').text(checkbox_message);
     }
   });

ざっくり書くと、こんな感じです。

・同じname属性のcheckboxで「:checked」となっている数を数える
・チェックの数がなかったらエラー表示

これで一応、jQueryを使ったバリデーションチェックが完成。

今回は、submitをトリガーにしてチェックをかけているので、再度チェックをかけるには送信ボタンを押さないといけません。

値が入力されたタイミングでチェックをかけたり、チェックする方法は様々ですが、一番オーソドックスな方法がこれかなーと思います。

入力中にリアルタイムチェックする方法も今後追加しようかなーと思います〜。

少しでも参考になれば幸いです！

サポートいただければ嬉しいです。