今回はバリデーションを簡単に実装できる「jQueryValidationプラグイン」について解説したいと思います。このプラグインを使用することで、新規登録フォームやログインフォームにバリデーションを適用し、かつエラーメッセージを簡単に表示することができます。jQueryで実装するので、リアルタイムでバリデーションチェックできるね。応用実装まとめ参考jQueryValidationプラグインとはjQueryValidationプラグインとは、バリデーションとエラーメッセージを簡単に実装できるプラグインです。errorsメソッドといったActiveRecordのバリデーションとは異なり、jQueryで実装するため、フロント部分(クライアントサイド側)で動的にバリデーションチェックができるというメリットがあります。クライアントサイド側のバリデーションだけだと不正なデータを完全には防げないので、クライアントサイドとサーバーサイド両方で実装する方がいいね。基本的な記述方法はじめに、jQueryValidationプラグインの基本的な記述方法について確認しておきましょう。以下のようなシンプルなフォームがあると仮定します。type="submit">送信する</button></form>このフォームにバリデーションをかける場合は、以下のようにjQueryを記述します。ポイントはrules以下にname属性を指定している点です。})})これでバリデーションをかけることができました。required.」で統一されてしまっています。これでは味気ないですね。エラーメッセージを独自で設定できるようカスタマイズしていきましょう。jQueryの記述を以下のように変更すると、messages以下に設定したエラーメッセージが表示されるはずです。})})これが基本的なjQueryValidationプラグインの記述方法です。端的にまとめると、バリデーションをかけたいフォームを指定バリデーションをかけたい項目のname属性をrulesで指定エラーメッセージをmessagesで記載という流れになります。Railsでの実装手順では実際に、RailsでjQueryValidationプラグインを実装してみましょう。今回はユーザーの新規登録にバリデーションをかけてみます。アプリケーションの立ち上げ以下のコマンドを打ち込み、新規アプリケーションを立ち上げましょう。今回はRails5.2系で開発を進めていきます。mysql今回開発するアプリケーションの環境は以下のようになります。アプリケーション名:jquery-validation-appRails:5.2.3Ruby:2.6.5DB:MySQL次にscaffoldの機能を使い、メールアドレス・名前・電話番号を登録することができるアプリケーションを生成しましょう。以下のコマンドを打ち込んでください。phone:string【Rails】秒速でアプリケーション開発できるscaffoldの使い方を簡単にまとめてみた手っ取り早くアプリケーションを開発することができるscaffold(スキャフォールド)の使い方について簡単に解説しています。新しい機能実装をテストしてみたい、すぐにでもアプリケーションを立ち上げたいといった場合に便利な機能なので、ぜひ覚えておきましょう。...すると、アプリケーションに必要なファイルが一括で生成されるはずです。app/assets/stylesheets/scaffolds.scss続いてデータベースを作成し、マイグレートまで行いましょう。db:migrateこれで事前準備は完了です。server」でサーバーを立ち上げ「localhost:3000/users」にアクセスし、どのような挙動をするか確認してみましょう。次はjQueryの導入です。‘jquery-rails’」をインストールする必要があります。install」を実行しましょう。'jquery-rails'続いてapplication.jsに以下を記述し、jQueryが読み込まれる設定を加えます。.」の下部に色々記述しないように気をつけてね。続いて、jQueryValidationプラグインをjquery-validation-appに導入します。以下のリンクから公式サイトに遷移してください。↓jQueryValidationプラグイン公式ガイド公式ガイドに遷移しましたら、ページ中部にある「Downloads」をクリックしましょう。code(zip)」をダウンロードします。先ほどダウンロードした圧縮ファイルを展開すると「dist」というフォルダがあるので、その中にある「jquery.validate.js」と「jquery.validate.min.js」を「app/assets/javascripts」以下に移動させましょう。これでjQueryValidationプラグインのダウンロードと導入が完了です。次にバリデーションを記載するJSファイルを作成しなければなりません。以下のように「app/assets/javascripts/jqueryconfig.js」を作成しましょう。プラグインの実行もう一度バリデーションの記載手順をおさらいしておくとこのようになります。バリデーションをかけたいフォームを指定バリデーションをかけたい項目のname属性をrulesで指定エラーメッセージをmessagesで記載バリデーションをかけたいフォームを指定まずはフォームの指定をしなければならないため、フォームの構造(_form.html.haml)を確認します。%>フォームを指定するidやclassがありませんでしたね。そこで、以下のようにフォームにidを付与してあげましょう。%>続いて「jqueryconfig.js」を以下のように編集します。})})バリデーションをかけたい項目のname属性をrulesで指定まずはname属性が付与されているかを確認しましょう。「_form.html.haml」のコードを見ると、name属性が記述されていませんね。試しに検証ツールでもフォームの構造を見てみましょう。コード自体にname属性は記述されていませんでしたが、このようにname属性がinputタグにしっかり付与されているはずです。「jqueryconfig.js」を以下のように編集しましょう。})})name属性に[]が入っている場合は、””(ダブルクォーテーション)で囲む必要があります。参考文献:http://micelle.org/trash/jquery-validation-pluginエラーメッセージをmessagesで記載では最後にエラーメッセージをカスタマイズしましょう。エラーメッセージをmessages以下に記載すれば良いんでしたね。})})これでjQueryValidationを用いたバリデーションチェックが完成しました。最後に挙動を確認し、うまく作動するかチェックしてみてください。応用実装ここからはやや応用の実装になりますが、jQueryValidationプラグインには、入力した値をチェックするオプションが存在しています。ここではそのオプションを使用して実装してみます。メールアドレスであれば@が必須、電話番号であれば数字のみかどうかをチェックすることができます。true,上記2つのオプションを「jqueryconfig.js」のrules以下に追記しましょう。これで不正な値を検知し、バリデーションをかけてくれます。})})このように、jQueryValidationプラグインには入力した値をチェックするオプションがあるのでぜひご自身で調べてみてください。参考として、よく使われるオプションを下に記載しておきます。公式ガイド:https://jqueryvalidation.org/jQueryValidationPluginメモ:http://micelle.org/trash/jquery-validation-plugin今回はバリデーションを簡単に実装できる「jQueryValidationプラグイン」について解説しました。このように「jQueryValidationプラグイン」を用いると簡単にクライアントサイド側で実装できることが分かりましたね。サーバーサイド側のバリデーションチェックと合わせて実装してみてください。Storageを用いた単数枚、複数枚画...Railsエンジニアちばよしはる銀座にあるヘルステック企業のRailsエンジニア。初心者から中級者向けに記事を更新しています。お酒とカレーと競馬が好き。TechTechMedia。