【Rails】簡単にバリデーションチェックできるjQueryValidationプラグインの実装手順を解説

今回はバリデーションを簡単に実装できる「jQueryValidationプラグイン」について解説したいと思います。このプラグインを使用することで、新規登録フォームやログインフォームにバリデーションを適用し、かつエラーメッセージを簡単に表示することができます。

jQueryで実装するので、リアルタイムでバリデーションチェックできるね。

この記事の内容

jQueryValidationプラグインとは
基本的な記述方法
Railsでの実装手順
まとめ
参考

jQueryValidationプラグインとは

jQueryValidationプラグインとは、バリデーションとエラーメッセージを簡単に実装できるプラグインです。errorsメソッドといったActiveRecordのバリデーションとは異なり、jQueryで実装するため、フロント部分（クライアントサイド側）で動的にバリデーションチェックができるというメリットがあります。

クライアントサイド側のバリデーションだけだと不正なデータを完全には防げないので、クライアントサイドとサーバーサイド両方で実装する方がいいね。

基本的な記述方法

はじめに、jQueryValidationプラグインの基本的な記述方法について確認しておきましょう。例えば、以下のようなシンプルなフォームがあると仮定します。

<form id="form">
  <div>
    <div>
      <p>氏名</p>
      <input type="text" name="name">
    </div>
    <div>
      <p>メールアドレス</p>
      <input type="email" name="email">
    </div>
    <div>
      <p>電話番号</p>
      <input type="tel" name="tel">
    </div>
  </div>
  <button type="submit">送信する</button>
</form>

このフォームにバリデーションをかける場合は、以下のようにjQueryを記述します。ポイントはrules以下にname属性を指定している点です。

$(function(){
  $('#form').validate({
    rules: {
      name: {
        required: true,
      },
      email: {
        required: true,
      },
      tel: {
        required: true,
      },
    },
  })
})

これでバリデーションをかけることができました。しかし、挙動を確認するとエラーメッセージは全て「This field is required.」で統一されてしまっています。これでは味気ないですね。

ではエラーメッセージを独自で設定できるようカスタマイズしていきましょう。jQueryの記述を以下のように変更すると、messages以下に設定したエラーメッセージが表示されるはずです。

$(function(){
  $('#form').validate({
    rules: {
      name: {
        required: true,
      },
      email: {
        required: true,
      },
      tel: {
        required: true,
      },
    },
    messages: {
      name: {
        required: '名前を入力して下さい',
      },
      email: {
        required: 'メールアドレスを入力して下さい',
      },
      tel: {
        required: '電話番号を入力して下さい',
      },
    },
  })
})

これが基本的なjQueryValidationプラグインの記述方法です。

端的にまとめると、

バリデーションをかけたいフォームを指定
バリデーションをかけたい項目のname属性をrulesで指定
エラーメッセージをmessagesで記載

という流れになります。

Railsでの実装手順

では実際に、RailsでjQueryValidationプラグインを実装してみましょう。今回はユーザーの新規登録にバリデーションをかけてみます。

アプリケーションの立ち上げ

以下のコマンドを打ち込み、新規アプリケーションを立ち上げましょう。今回はRails5.2系で開発を進めていきます。

$ rails _5.2.3_ new jquery-validation-app -d mysql

今回開発するアプリケーションの環境は以下のようになります。

アプリケーション名：jquery-validation-app
Rails：5.2.3
Ruby：2.6.5
DB：MySQL

次にscaffoldの機能を使い、メールアドレス・名前・電話番号を登録することができるアプリケーションを生成しましょう。以下のコマンドを打ち込んでください。

$ cd jquery-validation-app
$ rails generate scaffold User name:string email:string phone:string

【Rails】秒速でアプリケーション開発できるscaffoldの使い方を簡単にまとめてみた手っ取り早くアプリケーションを開発することができるscaffold（スキャフォールド）の使い方について簡単に解説しています。新しい機能実装をテストしてみたい、すぐにでもアプリケーションを立ち上げたいといった場合に便利な機能なので、ぜひ覚えておきましょう。...

すると、アプリケーションに必要なファイルが一括で生成されるはずです。

Running via Spring preloader in process 18356
      invoke  active_record
      create    db/migrate/20200622094941_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml
      invoke  resource_route
       route    resources :users
      invoke  scaffold_controller
      create    app/controllers/users_controller.rb
      invoke    erb
      create      app/views/users
      create      app/views/users/index.html.erb
      create      app/views/users/edit.html.erb
      create      app/views/users/show.html.erb
      create      app/views/users/new.html.erb
      create      app/views/users/_form.html.erb
      invoke    test_unit
      create      test/controllers/users_controller_test.rb
      create      test/system/users_test.rb
      invoke    helper
      create      app/helpers/users_helper.rb
      invoke      test_unit
      invoke    jbuilder
      create      app/views/users/index.json.jbuilder
      create      app/views/users/show.json.jbuilder
      create      app/views/users/_user.json.jbuilder
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/users.scss
      invoke  scss
      create    app/assets/stylesheets/scaffolds.scss

続いてデータベースを作成し、マイグレートまで行いましょう。

$ rails db:create
$ rails db:migrate

これで事前準備は完了です。試しに「rails server」でサーバーを立ち上げ「localhost:3000/users」にアクセスし、どのような挙動をするか確認してみましょう。

jQueryの導入

次はjQueryの導入です。Rails5.2系で実装しているため「gem ‘jquery-rails’」をインストールする必要があります。Gemfileに「gem ‘jquery-rails」を記載後「bundle install」を実行しましょう。

↓ Gemfile

gem 'jquery-rails'

続いてapplication.jsに以下を記述し、jQueryが読み込まれる設定を加えます。

//= require activestorage
//= require jquery
//= require rails-ujs
//= require_tree .

「//= require_tree .」の下部に色々記述しないように気をつけてね。

jQueryValidationの導入

続いて、jQueryValidationプラグインをjquery-validation-appに導入します。まずは以下のリンクから公式サイトに遷移してください。

↓　↓　↓

jQueryValidationプラグイン公式ガイド

公式ガイドに遷移しましたら、ページ中部にある「Downloads」をクリックしましょう。するとGithubのページに飛ぶので「Source code(zip)」をダウンロードします。

先ほどダウンロードした圧縮ファイルを展開すると「dist」というフォルダがあるので、その中にある「jquery.validate.js」と「jquery.validate.min.js」を「app/assets/javascripts」以下に移動させましょう。

これでjQueryValidationプラグインのダウンロードと導入が完了です。

バリデーション用のJSファイル作成

次にバリデーションを記載するJSファイルを作成しなければなりません。以下のように「app/assets/javascripts/jqueryconfig.js」を作成しましょう。

プラグインの実行

もう一度バリデーションの記載手順をおさらいしておくとこのようになります。

バリデーションをかけたいフォームを指定
バリデーションをかけたい項目のname属性をrulesで指定
エラーメッセージをmessagesで記載

バリデーションをかけたいフォームを指定

まずはフォームの指定をしなければならないため、フォームの構造（_form.html.haml）を確認します。

↓ _form.html.haml

<%= form_with(model: user, local: true) do |form| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div class="field">
    <%= form.label :email %>
    <%= form.text_field :email %>
  </div>

  <div class="field">
    <%= form.label :phone %>
    <%= form.text_field :phone %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

フォームを指定するidやclassがありませんでしたね。そこで、以下のようにフォームにidを付与してあげましょう。

↓ _form.html.haml

<%# id: "form" を追記 %>
<%= form_with(model: user, local: true, id: "form") do |form| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div class="field">
    <%= form.label :email %>
    <%= form.text_field :email %>
  </div>

  <div class="field">
    <%= form.label :phone %>
    <%= form.text_field :phone %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

続いて「jqueryconfig.js」を以下のように編集します。

$(function(){
  $('#form').validate({
  })
})

バリデーションをかけたい項目のname属性をrulesで指定

まずはname属性が付与されているかを確認しましょう。「_form.html.haml」のコードを見ると、name属性が記述されていませんね。

試しに検証ツールでもフォームの構造を見てみましょう。

コード自体にname属性は記述されていませんでしたが、このようにname属性がinputタグにしっかり付与されているはずです。

「jqueryconfig.js」を以下のように編集しましょう。

$(function(){
  $('#form').validate({
    rules: {
      "user[name]": {
        required: true,
      },
      "user[email]": {
        required: true,
      },
      "user[phone]": {
        required: true,
      },
    },
  })
})

name属性に[]が入っている場合は、””(ダブルクォーテーション)で囲む必要があります。

参考文献：http://micelle.org/trash/jquery-validation-plugin

エラーメッセージをmessagesで記載

では最後にエラーメッセージをカスタマイズしましょう。エラーメッセージをmessages以下に記載すれば良いんでしたね。

$(function(){
  $('#form').validate({
    rules: {
      "user[name]": {
        required: true,
      },
      "user[email]": {
        required: true,
      },
      "user[phone]": {
        required: true,
      },
    },
    messages: {
      "user[name]": {
        required: '名前を入力して下さい',
      },
      "user[email]": {
        required: 'メールアドレスを入力して下さい',
      },
      "user[phone]": {
        required: '電話番号を入力して下さい',
      },
    },
  })
})

これでjQueryValidationを用いたバリデーションチェックが完成しました。最後に挙動を確認し、うまく作動するかチェックしてみてください。

応用実装

ここからはやや応用の実装になりますが、jQueryValidationプラグインには、入力した値をチェックするオプションが存在しています。

ここではそのオプションを使用して実装してみます。

メールアドレスであれば@が必須、電話番号であれば数字のみかどうかをチェックすることができます。

email: true,
number: true,

上記2つのオプションを「jqueryconfig.js」のrules以下に追記しましょう。これで不正な値を検知し、バリデーションをかけてくれます。

$(function(){
  $('#form').validate({
    rules: {
      "user[name]": {
        required: true,
      },
      "user[email]": {
        required: true,
        email: true,
      },
      "user[phone]": {
        required: true,
        number: true,
      },
    },
    messages: {
      "user[name]": {
        required: '名前を入力して下さい',
      },
      "user[email]": {
        required: 'メールアドレスを入力して下さい',
      },
      "user[phone]": {
        required: '電話番号を入力して下さい',
      },
    },
  })
})

このように、jQueryValidationプラグインには入力した値をチェックするオプションがあるのでぜひご自身で調べてみてください。参考として、よく使われるオプションを下に記載しておきます。

minlength：指定した文字数より多いかをチェック
maxlength：指定した文字数より少ないかをチェック
rangelength：指定した文字数の範囲内かをチェック
equalTo：指定した要素と同じかチェック

まとめ

jQueryValidationプラグインとは、バリデーションとエラーメッセージを簡単に実装できるプラグインである
クライアントサイド側でバリデーションチェックができるというメリットがある
実装の大まかな流れは「バリデーションをかけたいフォームを指定」→「バリデーションをかけたい項目のname属性をrulesで指定」→「エラーメッセージをmessagesで記載」となる

参考

公式ガイド：https://jqueryvalidation.org/

jQueryValidationPluginメモ：http://micelle.org/trash/jquery-validation-plugin

今回はバリデーションを簡単に実装できる「jQueryValidationプラグイン」について解説しました。このように「jQueryValidationプラグイン」を用いると簡単にクライアントサイド側で実装できることが分かりましたね。ぜひ、サーバーサイド側のバリデーションチェックと合わせて実装してみてください。

Rails jQuery

【Rails】簡単にバリデーションチェックできるjQueryValidationプラグインの実装手順を解説

jQueryValidationプラグインとは

基本的な記述方法

Railsでの実装手順

アプリケーションの立ち上げ

jQueryの導入

jQueryValidationの導入

バリデーション用のJSファイル作成

プラグインの実行

バリデーションをかけたいフォームを指定

バリデーションをかけたい項目のname属性をrulesで指定

エラーメッセージをmessagesで記載

応用実装

まとめ

参考

【Rails】商品の削除機能を実装する方法を解説

【AWS基礎】リージョンとアベイラビリティーゾーンの関係性についてまとめてみた

【Rails】コード整形ツール「RuboCop」の導入・設定方法を初心者向けにまとめ...

【AWS】ローカル環境の画像保存先をS3に変更する方法を1から解説！

【AWS】Amazon Elastic IPとは？作成手順と設定方法も簡単に解説

【Rails】ERBのLintツールである「erb_lint」をRuboCopと連携...

【Git基礎】間違ってマージしてしまった！そんな時に役立つマージを取り消す２つの方法を解説

【Google Chrome】「この接続ではプライバシーが保護されません」が出た時の対処方法【PC版】

【Rails】バリデーションのエラーメッセージを取得・表示・日本語化する方法を完全解説！

【Flutter】ENViedパッケージを使ってAPIキーを安全に管理する方法

【Flutter】様々な画像表示・加工を試してみる

【Flutter】StatelessWidgetとStatefulWidgetの違いについて

【Flutter】パフォーマンス改善（Use ‘const’ with the constructor to improve performance.）の対処法

【Flutter】Android系統の「Material」とiOS系統の「Cupertino」をそれぞれ比較してみる