RequireJS with jQuery Validation

Question

I'm trying to use RequireJS to add the references to my jQuery validation script files. I have 3 script files instead of the usual 1:

1. jquery.validate - The jquery validation library
2. jquery.validate.unobtrusive - This adds unobtrusive validation to the jquery validation library (so you can use data attributes and it automatic wires them up). This depends on jquery.validate
3. jquery.validate.custom - This add my own custom unobtrusive validation methods and depends on jquery.validate.unobtrusive

I have setup the following configuration:

require.config({
    paths: {
        'jquery': 'Scripts/jquery-1.8.3.min',
        'jquery.validate': 'Scripts/jquery.validate.custom'
    },
    shim: {
        'Scripts/jquery.validate': ['jquery'],
        'Scripts/jquery.validate.unobtrusive': ['jquery', 'Scripts/jquery.validate'],
        'Scripts/jquery.validate.custom': ['jquery', 'Scripts/jquery.validate.unobtrusive']
    }
});

Now I have the following module:

define(['jquery', 'jquery.validate'], function($) {
    alert('Yey!');
});

However an error is thrown in the jquery.validate.custom file telling me the unobtrusive dependency has not been injected. After some debugging with the browser tools and looking at the network tab I can see it successfully downloads the jquery.validate.custom.js and jquery.validate.js files but it doesn't even try to download the jquery.validate.unobtrusive.js file.

I'd appreciate it if someone could show me what I am doing wrong. Thanks

Edit:

I have now tried:

require.config({
    paths: {
        'jquery': 'Scripts/jquery-1.8.3.min',
        'jquery.validate': 'Scripts/jquery.validate.custom'
    },
    shim: {
        'Scripts/jquery.validate': ['jquery'],
        'Scripts/jquery.validate.unobtrusive': ['jquery', 'Scripts/jquery.validate'],
        'jquery.validate': ['jquery', 'Scripts/jquery.validate.unobtrusive']
    }
});

And it works correctly. I also tried the following as I think it looks better:

require.config({
    paths: {
        'jquery': 'Scripts/jquery-1.8.3.min',
        'jquery.validate': 'Scripts/jquery.validate.custom',
        'jquery.validate.core': 'Scripts/jquery.validate',
        'jquery.validate.unobtrusive': 'Scripts/jquery.validate.unobtrusive'
    },
    shim: {
        'jquery.validate.core': ['jquery'],
        'jquery.validate.unobtrusive': ['jquery', 'jquery.validate.core'],
        'jquery.validate': ['jquery', 'jquery.validate.unobtrusive']
    }
});

But this gives a timeout error.

If anyone could explain why the second solution doesn't work that would be great. Thanks

Answer 1

You'll need to fix only one key in your config. Change this line:

'Scripts/jquery.validate.custom': ['jquery', 'Scripts/jquery.validate.unobtrusive']

With following:

'jquery.validate': ['jquery', 'Scripts/jquery.validate.unobtrusive']

And everything will work. This is because if you're using jquery.validate as a path you'll need to use same name in shim config to make all dependencies work correctly.