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

Question

0

Editorial Team

Asked: June 2, 20262026-06-02T10:57:19+00:00 2026-06-02T10:57:19+00:00

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

0

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>