将 Parsley 与 rails 6 一起使用答案

【问题标题】：Using Parsley with rails 6将 Parsley 与 rails 6 一起使用
【发布时间】：2020-11-06 12:01:04
【问题描述】：

我将欧芹用于多步形式。我的 Rails 版本是 6.0.3。我已按照以下步骤安装欧芹。

yarn add parsleyjs

我的 yarn.lock 文件：

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"

我的 package.json 文件：

{
  "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"
  }
}

这是我的 webpack/environment.js 文件： const { 环境 } = 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

这是我在 app/javascript/packs/application.js 中也需要的：

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

我在检查表单验证时遇到以下错误：

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

错误：

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)

如果有人可以帮助我，那就太好了。

【问题讨论】：

标签： jquery ruby-on-rails ruby parsley.js

【解决方案1】：

这可能是弃用，gem 自 2018 年以来一直没有更新。rails 6 于 2019 年推出，因此兼容性可能是问题。

或者您可以尝试在 javascript 文件夹中创建一个文件夹，并在其中创建两个文件，一个用于导入 scss，另一个用于导入 js，然后将这些文件导入到 application.js 文件中。

如果 css 未加载，请将其添加到您的应用程序 html 文件中

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

是的，链接标签和包标签。

【讨论】：

我也试过这样做。所有表单验证工作，但是当我尝试通过 $(form).parsley().validate() 手动检查表单验证时，它说欧芹不是一个函数
但是当您在应用程序内部进行验证时，它是否有效？ @Usar
是的。当我在控制台上检查并尝试上面的代码时，它给了我问题。

【解决方案2】：

这似乎是 jquery 更高版本（例如 3.5.1）的重大更改。检查您的 yarn.lock 并确保所有 jquery 依赖项都强制为 3.4.1 或更低版本。这为我解决了这个问题。

【讨论】：