Question

我正在与requirejs挣扎。我有以下jquery验证自定义插件模块定义：

验证-addon.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配置文件：

config.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用户注册视图中使用这些模块，如下所示：

register.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，请从jquery.validate.unobtrusive移除validation-addon.js要求并将其添加到主文件中。

将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.. } ); });

如果这可以解决您的问题，您可能不希望保留这样的代码，但这是一种快速简便的方法来检查这是否是问题。

使用requirejs加载jquery验证

1 个答案: