【Rails】Deviseのsign_upフォームにjQuery-Validation-Engine-railsを導入する

rails validation engine

エラーメッセージをPost送信する前に、ユーザーに知らせるために、本記事では ‘jQuery-Validation-Engine-rails’ を導入します。ユーザ認証機能には ‘devise’、CSSフレームワークには’devise-bootstrap-views’を使っています。

jQuery.validationEngine
https://github.com/posabsolute/jQuery-Validation-Engine
Devise
https://github.com/plataformatec/devise
Devise Bootstrap Views
https://github.com/hisea/devise-bootstrap-views

環境はこちらです

Scaffold

本記事ではサンプルとして新規プロジェクトを作るところから進めていきます。

Gemfile

以下のコマンドでdeviseのインストールから、セットアップまで行います。

Assets

必要なアセットを読み込ませていきます。

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

jQuery

基本形はこちらですが、その他オプションはドキュメントをどうぞ。

Views

フォームにidを設定し、それぞれの入力フィールドにバリデーションを設定していきます。

ちなみにsimple_formを使っている場合は、このような感じなるかと思います。

あとはhttps://localhost:3000/users/sign_upにアクセスして、動作を確認して下さい。

エラーメッセージの日本語化

jQuery-Validation-Engine-railsのエラーメッセージの日本語化は、次のリンクから「jquery.validationEngine-ja.js」をダウンロードして app/assets/javascripts/ 配下に配置します。
https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/languages/jquery.validationEngine-ja.js

以上です。ご覧いただき、ありがとうございました!😊


投稿者:

Shuji

読書したり、プログラミングしたりしています。何かアウトプットできそうなものがあれば投稿していきたいと思います。