I have a problem on jQuery valid function. When on IE, it doesn't work, the valid always return true. I used this code: client side validation with dynamically added field
Here's the chart:
Chrome IE
jquery-1.6.1 works not working
jquery-1.4.4 works works
1.6 doesn't work on IE too. However, 1.4.4 jQuery valid works on IE.
Here's the jsFiddle-friendly test (test this as local html):
<!--
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<form id="XXX">
<input type="submit" id="Save" value="Save">
</form>
<script type="text/javascript">
// sourced from https://stackoverflow.com/questions/5965470/client-side-validation-with-dynamically-added-field
// which I do think don't have a bug
(function ($) {
$.validator.unobtrusive.parseDynamicContent = function (selector) {
//use the normal unobstrusive.parse method
$.validator.unobtrusive.parse(selector);
//get the relevant form
var form = $(selector).first().closest('form');
//get the collections of unobstrusive validators, and jquery validators
//and compare the two
var unobtrusiveValidation = form.data('unobtrusiveValidation');
var validator = form.validate();
$.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
if (validator.settings.rules[elname] == undefined) {
var args = {};
$.extend(args, elrules);
args.messages = unobtrusiveValidation.options.messages[elname];
$('[name=' + elname + ']').rules("add", args);
} else {
$.each(elrules, function (rulename, data) {
if (validator.settings.rules[elname][rulename] == undefined) {
var args = {};
args[rulename] = data;
args.messages = unobtrusiveValidation.options.messages[elname][rulename];
$('[name=' + elname + ']').rules("add", args);
}
});
}
});
}
})($);
// ...sourced from others
// my code starts here...
$(function () {
var html = "<input data-val='true' " +
"data-val-required='This field is required' " + "name='inputFieldName' id='inputFieldId' type='text'/>";
$("form").append(html);
var scope = $('#XXX');
$.validator.unobtrusive.parseDynamicContent(scope);
$('#Save').click(function (e) {
e.preventDefault();
alert(scope.valid());
});
});
// ...my code ends here
</script>
UPDATE
I tried my code on jsFiddle, it has side-effect, the jQuery 1.6's valid is working on IE. Don't test this code on jsFiddle. Test this code on your local html
