Rails 6 和 Jquery 插件错误:$(...).validate 不是函数
Posted
技术标签:
【中文标题】Rails 6 和 Jquery 插件错误:$(...).validate 不是函数【英文标题】:Rails 6 and Jquery plugin error: $(...).validate is not a function 【发布时间】:2020-09-17 16:12:39 【问题描述】:尝试在 rails 6 中使用 jquery-validation 时出现以下错误 $(...).validate is not a function
。
我使用这个库的步骤是
-
通过 Yarn 添加 jquery jquery-validation bootstrap popper expose-loader
在 environment.js 中定义 jQuery
在 environment.js 中公开 Jquery
在 application.js 中导入 jquery.validate
为表单上的验证规则导入自定义 js ("../pages/form-validation")
创建表单
我在使用 jquery-steps 时也做了同样的事情,而且效果很好。我错过了什么?
environment.js
const environment = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide', new webpack.ProvidePlugin(
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
jquery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
))
environment.loaders.append('jquery',
test: require.resolve('jquery'),
use: [
loader: 'expose-loader',
options: '$',
,
loader: 'expose-loader',
options: 'jQuery',
],
)
module.exports = environment
application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You"re encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it"ll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("channels")
//Dependencias globales
import "bootstrap"
import "../globals/off-canvas"
import "../globals/hoverable-collapse"
import "../globals/misc"
import "../globals/settings"
// Componentes externos
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css"
import "jquery-steps/build/jquery.steps"
import "jquery-validation/dist/jquery.validate"
//Componentes de proleague
// JS especifico para ciertas páginas
import "../pages/wizard-forms"
import "../pages/datepicker"
import "../pages/form-validation"
form-validation.js(用于表单验证的自定义 js)
$(document).on('turbolinks:load', function()
'use strict';
$(function()
// validate signup form on keyup and submit
$("#match-form").validate();
);
)
有了这一切,我得到了一个 $(...).validate 未定义
另外,我尝试通过 application.js 方法中的 require('expose-loader?$!jquery') 公开 Jquery,但我仍然会收到错误消息,但如果我直接在控制台上调用该函数,它'得到认可
【问题讨论】:
【参考方案1】:我终于弄清楚了问题所在,这是我的 environment.js,当我在我的 ProvidePlugin 中将 jquery 公开为 resolve(jquery) 和 jquery/src/jquery 时,它导致我的应用程序加载 Jquery 两次,因此,阻止 jquery-validate 正常工作
所以我通过改变解决了这个问题
environment.plugins.prepend('Provide', new webpack.ProvidePlugin(
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
jquery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
))
到这里
environment.plugins.prepend('Provide', new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
Popper: ['popper.js', 'default']
))
我之前尝试过这样做,但由于那时我还没有使用expose-loader,所以它不起作用。
我在网上找到的另一个解决方案(但不适用于这个问题)是当 Yarn 加载 2 个不同的依赖项时,在这种情况下,yarn.lock 上的 yarn-deduplicate 是要走的路
【讨论】:
这解决了我在过去 4 个月里一直在努力解决的问题,但没有适当的帮助。我建议写一篇关于这个问题的文章。以上是关于Rails 6 和 Jquery 插件错误:$(...).validate 不是函数的主要内容,如果未能解决你的问题,请参考以下文章
rails 6 jquery not working in production 错误说 $ 没有定义