CODEWITHSUNDEEP
javascriptjqueryinternet-explorervalidation
Green Lantern
Green Lantern

Reputation: 868

How to make the jQuery valid function work reliably on IE?

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

Upvotes: 6

Views: 4626

Answers (2)

Jitender Kumar
Jitender Kumar

Reputation: 2587

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.com and check for the latest jquery code file.

Upvotes: 1

Beygi
Beygi

Reputation: 1953

This problem has been solved. try version 1.8.1.

Download jQuery validation plugin

Upvotes: 5

Related Questions