I have already managed to get the jQuery validation plugin to work with RequireJs. Now I am trying to set the default parameters for checking jquery so that it does not check the fields wrapped in a tag with the data prefix attribute (this is done in the Page1.js file). However, when you click the submit button, it tries to check both fields.
Here's the code (the original question is related to a more complex demo):
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8" /> <script src="http://ajax.cdnjs.com/ajax/libs/require.js/2.1.5/require.js"></script> <script> require.config({ paths: { 'jquery': 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3', 'jquery.validate': 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate', 'jquery.validate.unobtrusive': 'http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive' }, shim: { 'jquery.validate': ['jquery'], 'jquery.validate.unobtrusive': ['jquery', 'jquery.validate'] } }); require(['jquery', 'jquery.validate', 'jquery.validate.unobtrusive'], function($) { $.validator.setDefaults({ ignore: '[data-js-val-prefix] *' }); }); </script> </head> <body> <form> <div class="validation-summary-valid" data-valmsg-summary="true"><span>Please correct the errors and try again.</span> <ul><li style="display:none"></li></ul> </div> <fieldset> <legend>Include</legend> <input name="Include" type="text" required /> </fieldset> <fieldset data-js-val-prefix="Exclude"> <legend>Exclude</legend> <input name="Exclude" type="text" required /> </fieldset> <p><button type="submit">Submit</button></p> </form> </body> </html>
I do not use mini versions of libraries, as this can help with debugging.
I would be grateful for the help. Thanks
Edit:
If you change the script block to any of the following, it works fine.
Without RequireJs:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script> <script> $.validator.setDefaults({ ignore: '[data-js-val-prefix] *' }); </script>
Without unobtrusive JavaScript:
<script> require.config({ paths: { 'jquery': 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3', 'jquery.validate': 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate' }, shim: { 'jquery.validate': ['jquery'] } }); require(['jquery', 'jquery.validate'], function($) { $.validator.setDefaults({ ignore: '[data-js-val-prefix] *' }); $(function() { $('form').validate(); }); }); </script>
This offers me a problem with an unobtrusive validation library and RequireJs together. I'm sure I'm doing something trivial.