jQuery Validation Pluginをyarnで導入する

jQuery-validation-pluginをyarnで導入している記事が見つからなかったので書いてみます。

インストール

名前の通りjQueryが必要なのでとにかく追加（既に導入済みの方はスキップ）

$ yarn add jquery

次に本命のpluginを追加

$ yarn add jquery-validation

この2つをimportします
それぞれファイルの下に記述を追加してください！

app/javascript/packs/application.js

import "jquery";
import "jquery-validation";

config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

これで導入完了です👍

Formとjsファイル作成

sample.html.erb

<%= form_with model: @sample, id: sampleForm do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>
<% end %>

app/javascript/packs/sample_validation.js

$(function () {
  $("#sampleForm").validate( {
    rules: {
      "sample[title]": {
        required: true
      }
    }
  });
});

jsファイルをimportします！

app/javascript/packs/application.js

import "./sample_validation"

動作確認&エラー

やっと動作を確認してみます...が
$(...).validate is not a function
のエラーがコンソールに出てしまい、動作してくれません。

原因はimportしたjQueryとjquery-validationの中で使われているjQueryが別のものとして認識されてしまっていることにあります。

解決策

上記の解決策として、expose-loaderを導入します。
expose-loaderを使うと、jQueryをグローバル変数にしてくれるので問題を解決できます！

$ yarn add expose-loader@1

app/javascript/packs/application.js

import "jquery"; // 削除
import $ from "expose-loader?exposes[]=$&exposes[]=jQuery!jquery"; // 追加
import "jquery-validation";
import "./sample_validation";

これに伴い、environment.jsの以下の部分を削除します。（わざわざ追加してもらったのにすみません😅）

config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

完了

お疲れ様でした！
Bootstrapも使うとより良い感じに実装できるので調べてみてください！

余談

ここまでの実装だと、一部の機能（ファイルのバリデーションなど）が使えないので、下の2つもimportをおすすめめします

app/javascript/packs/application.js

import 'jquery-validation/dist/additional-methods' // 追加機能
import 'jquery-validation/dist/localization/messages_ja' //日本語化

参考記事