Rails 6和Jquery插件错误:$(...).validate不是一个函数 [英] Rails 6 and Jquery plugin error: $(...).validate is not a function

问题描述

尝试使用 jquery-validation时出现以下错误$(...).validate is not a function 在导轨6中.

I'm getting the following error $(...).validate is not a function while trying to use jquery-validation in rails 6.

我使用该库的步骤是

1. 全部通过Yarn添加jquery jquery-validation引导程序popperexplorer-loader
2. 在environment.js中定义jQuery
3. 将Jquery暴露在environment.js中
4. 在application.js中导入jquery.validate
5. 为表单上的验证规则导入自定义js("../pages/form-validation")
6. 创建表单

我使用jquery-steps做了同样的事情，并且效果很好.我想念什么?

I did the same to use jquery-steps and it worked perfectly. What am I missing?

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)

form-validation.js (custom js for form validation)

$(document).on('turbolinks:load', function() {
    'use strict';
    $(function() {
        // validate signup form on keyup and submit
        $("#match-form").validate();
    });
})

有了这些，我得到了一个$(...).validate未定义

With all this I'm getting a $(...).validate not defined

此外，我尝试通过application.js方法中的require('expose-loader?$！jquery')公开Jquery，但仍然会收到错误消息，但是如果我直接在控制台上调用该函数，则该错误d得到认可

Also, I tried exposing Jquery through the require('expose-loader?$!jquery') in application.js approach and I'd still get the error, but if I called the function directly on the console, it'd get recognized

推荐答案

当我将jquery公开为resolve(jquery)和jquery/src/jquery时，我终于弄清了问题所在，这就是我的environment.js.在我的ProvidePlugin中，这导致我的应用程序两次加载Jquery，从而阻止了jquery-validate正常工作

I finally figured out what was the problem and it was my environment.js, while I was exposing jquery as resolve(jquery) and as jquery/src/jquery in my ProvidePlugin, it was causing my app to load Jquery twice, thus, preventing jquery-validate to work properly

所以我通过更改来解决了问题

So I resolved the problem by changing

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']
}))

我以前曾经尝试过这样做，但是由于那时我还没有使用暴露加载器，所以它是行不通的.

I had tried doing this before, but since I wasn't using expose-loader by then, it wouldn't work.

我在网上找到的另一种解决方案(但不适用于此问题)是当Yarn加载2个不同的依赖项时，在这种情况下，将yarn.lock上的yarn-duduplicate成为可行的方法

Another solution that I found online (but not applicable to this problem) is when Yarn loads 2 different dependencies, in that case, yarn-deduplicate on yarn.lock is the way to go

这篇关于Rails 6和Jquery插件错误:$(...).validate不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！