3

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

0

2 Answers 2

2

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:

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

And then in your module, request the custom file:

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

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:

Module names requested --> expand to any additional modules from shim config --> load the actual files based on path mapping

Whereas what you are trying to do is:

Module names requested (jquery.validate) --> resolve to actual files based on path mapping (jquery.validate.custom) --> expand to any additional modules from shim config --> resolve paths again

So for example, this works fine:

require.config({
  paths: {
    module1: 'module1file',
    module2: 'module2file',
    module3: 'module3file'
  },
  shim: {
    module3: ['module2'],
    module2: ['module1']
  }
});

require(['module3'], function( ) {
});

But this does not:

require.config({
  paths: {
    module1: 'module1file',
    module2: 'module2file',
    module3: 'module3file'
  },
  shim: {
    module3: ['module2'],
    module2file: ['module1']
  }
});

require(['module3'], function( ) {
});
6
  • Thanks I just tried this but I get the error: "Load timeout for modules: Scripts/jquery.validate".
    – nfplee
    Jun 7, 2013 at 21:10
  • @nfplee that's the same path as your original example. Does the file exist at that location?
    – Steve P
    Jun 7, 2013 at 21:12
  • Yeah the path is correct. The funny thing is @Inferpse answer works but I can't get my head around why your solution wouldn't. I'll update my question with more information.
    – nfplee
    Jun 7, 2013 at 21:29
  • @nfplee I edited my answer to include the jquery exports in the shim section as this is often standard. Also renamed some things to make it easier to read regarding what's file path and what's module alias. Please also post the list of files in your scripts directory, and what you are require'ing from your module (you didn't post that in your edited version)
    – Steve P
    Jun 7, 2013 at 22:33
  • It still times out afraid, the only script files are the ones specified. I'm trying to build this up from scratch and i'm adding to it as I go. Also I know I can set the base url to append the Scripts directory but I can't do this due to the structure of my application in the future.
    – nfplee
    Jun 8, 2013 at 9:01
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.

3
  • Thanks this worked a treat. I've edited my question (new bit at the bottom) with another attempted solution based on your answer but it did not work. I'd appreciate your help once more.
    – nfplee
    Jun 7, 2013 at 21:36
  • I've tried your new config. It works for me. You can test it live here. Check your "Network" and "Console" panels in dev tools (timeout problem description here)
    – Inferpse
    Jun 8, 2013 at 10:01
  • Thanks, damn typo was throwing me. I'll mark your solution as the answer as you went to the time in writing the test which helped solved my problem.
    – nfplee
    Jun 10, 2013 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.