JavaScript for HTML5 required field set up to work in Safari

Question

I am using the following script to change the HTML5 required attribute of my input elements. I am wonder whether there is a way to modify this script to make it also work in Safari browsers, since Safari does not support this attribute.

Here is the script:

$(document).ready(function() {
    $_POST = array();
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field can't be blank");

            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");

        };
    }
})

Solution 1

Check out this page here. It contains a hacky solution that should add the desired functionality

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

Solution 2

You can also do this:

var valid = true;
$('input[required]').each(function() {
    if (this.value == '') {
        // Alert or message to let them know
        valid = false;
        return false; // stop on first error, or remove this and it'll go through all of them.
    }
});

if (valid === false) {
    return false;
}