将 Parsley 与 rails 6 一起使用

Question

I am using parsley for multistep form. My rails version is 6.0.3. I have followed below steps to install parsley.

yarn add parsleyjs

my yarn.lock file:

parsleyjs@^2.9.2:
  version "2.9.2"
  resolved "https://registry.yarnpkg.com/parsleyjs/-/parsleyjs-2.9.2.tgz#67c96961d371821f2623965fa2cc81a4522874cb"
  integrity sha512-DKS2XXTjEUZ1BJWUzgXAr+550kFBZrom2WYweubqdV7WzdNC1hjOajZDfeBPoAZMkXumJPlB3v37IKatbiW8zQ==
  dependencies:
    jquery ">=1.8.0"

my package.json file:

{
  "name": "patient_web",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.1",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "jquery": "^3.5.1",
    "parsleyjs": "^2.9.2",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

here is my webpack/environment.js file: const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Parsley: 'parsleyjs/src/parsley'
  })
)
module.exports = environment

Here is i have also require in app/javascript/packs/application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("scss/application.scss")
require("jquery")
require("parsleyjs")

I am getting below error on checking form validation by:

$(form).parsley().validate()

error:

Uncaught TypeError: $(...).parsley is not a function
    at HTMLButtonElement.<anonymous> (sign_up:75)
    at HTMLButtonElement.dispatch (event.js:328)
    at HTMLButtonElement.elemData.handle (event.js:148)

It would be great if anyone could help me.

Answer 1

This could be maybe deprecation, the gem hasnt been updated since 2018. And rails 6 came out 2019 so compatibility could be the problem.

or you can try creating a folder inside the javascript folder and inside create two files, one where you import the scss and the other where you import the js and then import those files into the application.js file.

if the css doesnt load add this to your application html file

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    

Yes, both link tag and pack tag.

Answer 2

This appears to be a breaking change with later versions of jquery (eg 3.5.1). Check your yarn.lock and ensure all jquery dependencies are forced to 3.4.1 or lower. This solved the issue for me.