html5 required attribute on non supported browsers

Question

I have a web application which makes use of the HTML5 required attribute frequently. However Safari and ie 8/9 do not support this attribute. Is there a jQuery plugin that will force the behaviour on non-compatible browsers?

Answer 1

This works without any plugin (JQuery only):

<script>

    // fix for IE < 11
    if ($("<input />").prop("required") === undefined) {
        $(document).on("submit", function(e) {
            $(this)
                    .find("input, select, textarea")
                    .filter("[required]")
                    .filter(function() { return this.value == ''; })
                    .each(function() {
                        e.preventDefault();
                        $(this).css({ "border-color":"red" });
                        alert( $(this).prev('label').html() + " is required!");
                    });
        });

    }
</script>

Answer 2

You could shim it simply...

if ($("<input />").prop("required") === undefined) {
    $(document).on("submit", function(event) {
         $(this)
           .find("input, select, textarea")
           .filter("[required]")
           .filter(function() { return this.value; })
           .each(function() {
               // Handle them.
           });
    });
}