Required Attribute Not Work in Safari Browser

Required Attribute Not work in Safari Browser

Safari, up to version 10.1 from Mar 26, 2017, doesn't support this attribute, you need to use JavaScript.

This page contains a hacky solution, that should add the desired functionality: http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

HTML:

<form action="" method="post" id="formID">
    <label>Your name: <input required></label><br>
    <label>Your age: <input required></label><br>
    <input type="submit">
</form>

JavaScript:

var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
        if (!event.target.checkValidity()) {
            event.preventDefault(); // dismiss the default functionality
            alert('Please, fill the form'); // error message
        }
    }, false);

You can replace the alert with some kind of less ugly warning, like show a DIV with error message:

document.getElementById('errorMessageDiv').classList.remove("hidden");

and in CSS:

.hidden {
    display: none;
}

and in HTML:

<div id="errorMessageDiv" class="hidden">Please, fill the form.</div>

The only drawback to this approach is it doesn't handle the exact input that needs to be filled. It would require a loop accross all inputs in the form and checking the value (and better, check for "required" attribute presence).

The loop may look like this:

var elems = form.querySelectorAll("input,textarea,select");
for (var i = 0; i < elems.length; i++) {
    if (elems[i].required && elems[i].value.length === 0) {
        alert('Please, fill the form'); // error message
        break; // show error message only once
    }
}

Safari is not acknowledging the required attribute. How to fix it?

At this time, Safari doesn't support the "required" input attribute.
http://caniuse.com/#search=required

To use the 'required' attribute on Safari, You can use 'webshim'

1 - Download webshim

2 - Put this code :

<head>
    <script src="js/jquery.js"></script>

    <script src="js-webshim/minified/polyfiller.js"></script> 

    <script> 
        webshim.activeLang('en');
        webshims.polyfill('forms');
        webshims.cfg.no$Switch = true;
    </script>
</head>

required attribute does not work properly in SAFARI browser

The only way you can guarantee client side form validation in safari is to use javascript.

Safari doesn't support the required html attribute completely.

That said, it's not a bad idea anyway to have a separate layer for client side validation that isn't baked into bootstrap. If you bind to the form submit event it's pretty easy to loop through the fields and do your own assessment.

html5 required attribute on non supported browsers

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

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

Attribute Required not working in IE8/Safari using Jquery Validate

I think the required attribute is actually a HTML5 feature and not a jquery feature. In jquery you do not need to put in a required attribute, just declare the dom element as required as your first work around states. The required attribute is not yet supported by some browsers.

For Safari the form validation is only partially supported, i.e. does not give a warning when a required form is not filled during submission, while for IE8 its totally not supported. Click these links for more info: http://caniuse.com/#feat=form-validation and here http://www.w3schools.com/tags/att_input_required.asp.

JavaScript for HTML5 required field set up to work in Safari

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

Required Attribute Not Work in Safari Browser