投稿日：2019年2月14日
jQuery Validation Plugin × SweetAlert2 でフォームのバリデ―ションをカスタマイズする
ここ2週間ほどウェブの制作が立て込んでいて制作ネタの連投が続いております。ホントはもっと企業の担当者の方の役に立つネタのブログ書きたいんだけど、忙しくさせて頂いているのはありがたいということで、とりあえず制作のインスピレーションが頭の中にあるうちに制作ネタのブログを書き綴り続けております。集客や人材採用など、研究を続けて方法論を樹立できるように考えを進めておりますので、ウェブの技術との掛け合わせで地域の企業様のお力になれるように努力の日々です。
さて、今日は jQuery Validation Plugin とSweetAlert2 を利用して簡単にフォームのUIを少しだけリッチに表現してみたいと思います。
非常に簡単に実現できるわりにそれなりに綺麗に表現できるので一度試してみて頂ければと思います。
利用ライブラリ
jQuery Validation Plugin
https://jqueryvalidation.org/validate/
Sweet Alert 2
https://sweetalert2.github.io/
jQuery Validation Plugin は jQuery に依存していますが、Sweet Alert 2 は jQuery に非依存です（素晴らしい！）。
実装
ライブラリの読み込み
- jQuery 3系と jQuery Validation Plugin 、SweetAlert2を読み込んでいます。
HTML
- 普通のHTMLのフォームです。フォーム要素にformクラスを、送信ボタンに btn-submit クラスを付与しています。
JavaScript
- jQuery Validation Plugin を利用して必須チェックを行っています。
- メールアドレスの入力項目についてはメールアドレス形式かどうかもチェックしています。
- エラーメッセージはデフォルトだと英語なので日本語に変更しています。
- バリデーションが通った時のコールバックを利用してSweetAlert2を呼び出して確認ダイアログを表示させています。
- 確認ダイアログから送信ボタンをクリックするとフォームが送信される仕組みです。キャンセル時は何もしません。
動作確認
未入力のまま送信ボタンをクリックすると未入力のエラーが表示されます。
入力が完了している状態で送信ボタンをクリックすると確認ダイアログが表示され、送信ボタンをクリックするとフォームアクションを実行します。
まとめ
非常にシンプルかつユーザーとしての使い勝手もなかなか悪くないフォームのバリデーションを簡単に実現することができました。
JavaScriptが利用できない環境用にPHPなどのサーバーサイド側でのバリデーション処理も必要ですが、フロント側でリアルタイムに処理することでユーザーの使い勝手を多少向上させることが可能だと思います。その他にも便利なライブラリはいくつかありますが、現状この組み合わせが非常にシンプルかついい感じだと感じているのでシンプルなフォームを素で1から組む場合にはオススメです。
ぜひ一度お試しください！( *’ω’*)ノ
