使用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..
    }

  );
});

如果這解決了您的問題，則您可能不想保留這樣的代碼，但這是一種快速簡便的方法來檢查這是否是問題所在。