Menu
I've already managed to get the jQuery validation plugin to work with RequireJs. I'm now trying to set the jquery validation default parameters so that it doesn't validate fields wrapped in a tag with an attribute of data-prefix (this is done in the Page1.js file). However when you click the submit button it tries to validate both fields.
Here's the code (the original question linked 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 am not using the minified versions of the libraries as it may help when debugging.
I'd appreciate the help. Thanks
Edit:
If you change the script block to either 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 suggests to me there's an issue with the unobtrusive validation library and RequireJs together. I'm sure I'm doing something trivial wrong.
963
I've answered my own question with the help of @Sparky. The issue happens because the jquery.validate.unobtrusive file wires up the validate method, if you then say $.validator.setDefaults in the callback function, it would have already wired up the validation and it will be ignored. If you change the require script block to the following:
require(['jquery', 'jquery.validate'], function($) {
$.validator.setDefaults({
ignore: '[data-js-val-prefix] *'
});
require(['jquery.validate.unobtrusive']);
});
All is dandy. I hope this helps.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With