CODEWITHSUNDEEP
jqueryinternet-explorer-8jquery-validate
FloatLeft
FloatLeft

Reputation: 1337

jQuery validation and IE8

I'm having an issue with jQuery validation not firing in IE8. All other browsers work perfectly.

I've created a cut down example here:

http://www.gilkes.me.uk/jqueryvalidation/index.html

You can see that in IE9, Firefox, etc, the tooltip validation message is shown if the button is pressed with either checkbox unchecked.

In IE8, no validation is performed. Why is this?

Form markup:

<form action="http://www.google.com" method="post">
<div style="margin-top: 50px; text-align: left; margin-left: 30px;">
    <ul>
        <li style="list-style: none;">
            <input class="checkbox" data-val="true" data-val-checkboxtrue="You must tick the box indicated." data-val-required="The QuestionAccepted field is required." id="Questions_0__QuestionAccepted" name="Questions[0].QuestionAccepted" type="checkbox" value="true" /><input name="Questions[0].QuestionAccepted" type="hidden" value="false" />
            <strong>Question 1.</strong>
            <input id="Questions_0__QuestionText" name="Questions[0].QuestionText" type="hidden" value="That you have been a United Kingdom resident for at least 6 out of the last 12 months." />
            <input id="Questions_0__ValidationMessage" name="Questions[0].ValidationMessage" type="hidden" value="Please confirm that you have read and understood " />
            <span class="field-validation-valid" data-valmsg-for="Questions[0].QuestionAccepted" data-valmsg-replace="true"></span></li>
        <li style="list-style: none; margin-top: 30px;">
            <input class="checkbox" data-val="true" data-val-checkboxtrue="You must tick the box indicated." data-val-required="The QuestionAccepted field is required." id="Questions_1__QuestionAccepted" name="Questions[1].QuestionAccepted" type="checkbox" value="true" /><input name="Questions[1].QuestionAccepted" type="hidden" value="false" />
            <strong>Question 2.</strong>
            <input id="Questions_1__QuestionText" name="Questions[1].QuestionText" type="hidden" value="That you are aged 74 or under." />
            <input id="Questions_1__ValidationMessage" name="Questions[1].ValidationMessage" type="hidden" value="That you are aged 74 or under." />
            <span class="field-validation-valid" data-valmsg-for="Questions[1].QuestionAccepted" data-valmsg-replace="true"></span></li>
    </ul>
    <p style="margin-top: 30px;">
        <button type="submit" id="Continue" class="button-continue">
            Buy Now
        </button>
    </p>
</div>
</form>

I think there may be an issue with this script. Something within this is not working orrectly with IE8:

<script type="text/javascript">
    jQuery.validator.unobtrusive.adapters.add("checkboxtrue", function (options) {
        if (options.element.tagName.toUpperCase() == "INPUT" && options.element.type.toUpperCase() == "CHECKBOX") {
            options.rules["required"] = true;
            if (options.message) {
                options.messages["required"] = options.message;
            }
        }
    });
</script>

Upvotes: 1

Views: 6945

Answers (2)

FloatLeft
FloatLeft

Reputation: 1337

This issue was fixed by using version 1.9 of jQuery Validate as the version I was using (1.6) is not compatible with the latest versions of jQuery:

jQuery Validation not working in IE7 + IE8

I'd actually read that question but did not think it applied to me as I was sure I was using version 1.9 of jQuery Validate

Upvotes: 1

Martin Vrkljan
Martin Vrkljan

Reputation: 879

I haven't noticed any errors showing in IE on submit, so I'm guessing the first if statement is not returning true. Have you tried using alert() to check what values options.element.tagName and options.element.type have in IE8?

Upvotes: 0

Related Questions