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:
- jquery.validate - The jquery validation library
- 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
- 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
I believe the keys in the shim should match the names that you are require'ing in your module. Also I think it confuses the issue to use the name jquery.validate but then map it to custom.
To me the following structure would be more intuitive:
And then in your module, request the custom file:
EDIT: thinking more about your original config and why it doesn't work: the issue you have is that you are trying to intersperse the use of full paths with module aliases in the shim section. RequireJS does not appear to work this way. It seems to be a one way resolution process:
Whereas what you are trying to do is:
So for example, this works fine:
But this does not:
You'll need to fix only one key in your config. Change this line:
With following:
And everything will work. This is because if you're using
jquery.validate
as a path you'll need to use same name inshim
config to make all dependencies work correctly.