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 错误说 $ 没有定义

JQuery 和 Rails 日历插件

在 Rails 3 中使用 jQuery 插件

Rails 6 + Webpack + jQuery 刷新时不保存更改

jquery 比率插件不适用于 Rails

Rails 6.0:jquery 3.6.0 不再与 typeahead.js 0.11.0 兼容(?)