Rails 6集成jquery-validation报错：$(...).validate is not a function

我之前碰到过完全一样的问题，结合你的配置细节来看，问题大概率出在模块加载顺序和Turbolinks的执行时机上，下面是几个亲测有效的解决步骤：

1. 调整jquery-validation的导入方式，确保挂载到全局jQuery #

Webpack的模块作用域会导致直接import jquery-validation时，它可能找不到全局的jQuery对象来挂载validate方法。你可以修改application.js中的导入逻辑：

// 先明确把jQuery挂载到全局，再加载jquery-validation
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-validation/dist/jquery.validate';

// 或者改用require（有时候require的全局绑定更直接）
// require('jquery-validation/dist/jquery.validate');

2. 简化Turbolinks事件绑定逻辑 #

你当前的form-validation.js嵌套了turbolinks:load和$(function())双重DOM监听，这可能导致代码执行时jquery-validation还没完成挂载。而且turbolinks:load已经等价于DOM ready，不需要额外嵌套：

$(document).on('turbolinks:load', function() {
  'use strict';
  // 先校验方法存在性，避免Turbolinks页面切换时的加载延迟问题
  if ($.fn.validate) {
    $("#match-form").validate();
  }
})

3. 调整expose-loader的优先级 #

你的environment.js中用了environment.loaders.append('jquery', ...)，append会把expose-loader放到加载队列的最后，可能导致jquery在被其他模块导入时还没完成全局暴露。改成prepend确保它先处理jquery：

// 把append替换成prepend
environment.loaders.prepend('jquery', {
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader', options: '$',
  }, {
    loader: 'expose-loader', options: 'jQuery',
  }],
})

4. 验证依赖安装完整性 #

如果上面的步骤都没解决，可以先确认包是否正确安装：

yarn remove jquery-validation && yarn add jquery-validation

然后在浏览器控制台执行console.log($.fn.validate)，如果能看到函数体，说明挂载成功，问题就只是代码执行时机的问题；如果还是undefined，可以检查webpack是否正确打包了jquery-validation。

补充说明：你提到jquery-steps能正常运行，是因为它的模块导出逻辑会自动关联全局jQuery，而jquery-validation需要明确的全局jQuery对象才能完成方法挂载。

内容的提问来源于stack exchange，提问作者Valdi