loading jquery validation using requirejs

Question

I am struggling with requirejs . I have following jquery validation custom addon module defined:

validation-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');
        }
    });

    ....
});

My requirejs config file :

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']
        }
    }
});

I am using these modules on my mvc user regitration view like this:

register.cshtml

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

The problem i am facing is little weird. When i go to user registration view first time and input wrong values in use input fields than custom highlight and unhighlight functions which i have overridden on jquery validator is not executing but if i reload the register view itself than it suddenly start executing.

My feeling is that may be this is happening because of the loading sequence of modules, but i dont understand how to solve this, can anybody please help me to solve this issue ?

Answer 1

It looks like a timing issue. These kinds of issue sometimes clear when you do a reload because the order in which things initialize depends on what is in the cache, etc.

It is possible right now that jquery.validate.unobtrusive does its work on the DOM before the code that calls $.validator.setDefaults is executed. To check whether $.validator.setDefaults is executed before jquery.validate.unobtrusive , remove the jquery.validate.unobtrusive requirement from validation-addon.js and add it to your main file.

Change validation-addon.js to:

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');
        }
    });

    ....
});

And change register.cshtml to:

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon', 'jquery.validate.unobtrusive'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

If this solves your problem you probably don't want to keep the code like this but this is a quick and easy way to check whether this is the issue.