html5 required attribute on non supported browsers

jquery html required
steve0nz picture steve0nz · Jul 5, 2013 · Viewed 15k times · Source

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

snorri picture snorri · Oct 30, 2014

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>

Related questions

remove required from input fields that are in hidden divs

I have one form and couple of divs with bunch of input fields, and one select field that shows one div and hide all others. In those input field I have html5 required tag. I would like to remove required …

Read More
Check if all required fields are filled in a specific div

I have some form fields that are dynamically generated form the database. There are inputs, checkboxes, radio buttons, textarea's, and select's. All the fields are in a parent div with ID dynamic-form-fields. Some fields have a required attribute. This is …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More