使用 requireJS 加载 jQuery 验证

Question

我正在努力解决requirejs。我定义了以下jquery验证自定义插件模块：

验证插件.js

define(['jquery', 'jquery.validate', 'jquery.validate.unobtrusive'], 
function ($) {
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });
    ....
});

我的requirejs配置文件：

配置.js

require.config({
    baseUrl: '/Scripts',
    paths: {
        'jquery': 'lib/jquery-2.0.3',
        'jquery.validate': 'lib/jquery.validate',
        'jquery.validate.unobtrusive': 'lib/jquery.validate.unobtrusive',
    },
    shim: {
        'jquery.validate': {
            deps: ['jquery']
        },
        'jquery.validate.unobtrusive': {
            deps: ['jquery.validate']
        }
    }
});

我在我的 mvc 用户注册视图上使用这些模块，如下所示：

注册.cshtml

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon'], 
     function (userregistration) {
        //using user registration module here..
    }
  );
});

我面临的问题有点奇怪。当我第一次进入用户注册视图并在使用输入字段中输入错误的值时，我在 jquery 验证器上覆盖的自定义突出显示和取消突出显示函数没有执行，但如果我重新加载寄存器视图本身，它会突然开始执行。

我

的感觉可能是由于模块的加载顺序而发生这种情况，但我不明白如何解决这个问题，任何人都可以帮助我解决这个问题吗？

Answer 1

这看起来像是一个计时问题。当您执行重新加载时，这些问题有时会清除，因为初始化的顺序取决于缓存中的内容等。

现在有可能jquery.validate.unobtrusive在执行调用$.validator.setDefaults的代码之前在 DOM 上完成它的工作。要检查$.validator.setDefaults是否在jquery.validate.unobtrusive之前执行，请从validation-addon.js中删除jquery.validate.unobtrusive要求并将其添加到主文件中。

将validation-addon.js更改为：

define(['jquery', 'jquery.validate'], 
function ($) {
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });
    ....
});

并将register.cshtml更改为：

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon', 'jquery.validate.unobtrusive'], 
     function (userregistration) {
        //using user registration module here..
    }
  );
});

如果这解决了您的问题，您可能不想像这样保留代码，但这是检查这是否是问题的快速简便的方法。