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=".4.4/jquery.min.js"></script> -->

<script src=".6.1/jquery.min.js" type="text/javascript"></script>

<script src=".validate/1.8/jquery.validate.min.js" type="text/javascript"></script>

<script src=".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 
    // 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 pare 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

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./ajax/libs/jquery/1.4.4/jquery.min.js"></script> -->

<script src="http://ajax.googleapis./ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn./ajax/jquery.validate/1.8/jquery.validate.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn./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./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 pare 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

• javascript
• jquery
• internet-explorer
• validation

• 2 What version of IE did you use? – Reporter Commented May 26, 2011 at 7:31
• I've recently used the dynamic parse function you've found there and I cant seem to replicate the problem, seems to all be working on 1.6.1 and IE. Perhaps it has something to do with the way your adding a custom input with validation attached. Could you get this up and running on JSFiddle? – Henry Commented May 26, 2011 at 8:51
• 2 That's a lot of code. Some of it not even HTML/JS. If you minimize the amount of code you are much more likely to get an answer. – Adam Bergmark Commented May 26, 2011 at 11:28
• ok, i'll remove the ASP.NET MVC code – Green Lantern Commented May 26, 2011 at 11:40

2 Answers 2

This problem has been solved. try version 1.8.1.

Download jQuery validation plugin

Hi I also got the same problem and I have updated my both scripts file to the latest one and everything is working very fine on my side. Go to jquery. and check for the latest jquery code file.