Workaround for Safari not Preventing Form Submissions with Invalid Data

Safari as of version 6 does not prevent form submissions of invalid data. This technique applies a workaround for all forms on the DOM.

by TJ VanToll

HTML

<form>
    <input type="text" required />
    <input type="submit" />
</form>
<form>
    <input type="text" required />
    <input type="submit" />
</form>

CSS

body { padding: 20px; }
form { padding: 10px; }

JavaScript

var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
    forms[i].noValidate = true;

    forms[i].addEventListener('submit', function(event) {
        //Prevent submission if checkValidity on the form returns false.
        if (!event.target.checkValidity()) {
            event.preventDefault();
            //Implement you own means of displaying error messages to the user here.
        }
    }, false);
}