使用requirejs加载jQuery验证

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 jquery.validate.unobtrusive的代码之前在DOM上进行工作。 要检查$.validator.setDefaults jquery.validate.unobtrusive是否在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..
    }

  );
});

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