CODEWITHSUNDEEP
jqueryhtmlrequired
steve0nz
steve0nz

Reputation: 906

html5 required attribute on non supported browsers

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?

Upvotes: 6

Views: 15484

Answers (5)

Mimo
Mimo

Reputation: 6075

You can use h5validate which does exactly what you need.

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

Upvotes: 2

snorri
snorri

Reputation: 71

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>

Upvotes: 7

garyv
garyv

Reputation: 89

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>

Upvotes: 2

steve0nz
steve0nz

Reputation: 906

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

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

Upvotes: -1

alex
alex

Reputation: 490153

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.
           });
    });
}

Upvotes: 4

Related Questions