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

You can use h5validate which does exactly what you need.

<script>
$(document).ready(function () {
  $('form').h5Validate();
});
</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.
           });
    });
}

Answer 3

I wrote a very simple jQuery plugin for this. It just adds client side validation to a forms using the 'required' attribute.

https://github.com/garyv/jQuery-Validation-plugin

After including the plugin, you can call the validate() in jQuery's document ready function or at the end of the html body.

<script>
  $(document).ready(function(){
    $('form').validate();
  });
</script>

Answer 4

Found a very versatile and lightweight (once minified) engine that works cross-browser including ie8!

http://posabsolute.github.io/jQuery-Validation-Engine/

Answer 5

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>