Detect if the HTML5 `required` attribute is enforced

Question

Is there an easy way to test if the HTML5 required attribute is actually enforced by a browser when submitting a form? i.e. the form can't be submitted if a required field has not been filled in.

I'd rather not add modernizr just for that, and https://stackoverflow.com/a/3937924/117704 does not work for Safari: Safari does not prevent the form submission when a required field , and still document.createElement('input').required is not undefined in Safari.

I want to implement a solution like https://stackoverflow.com/a/31319587/117704 but enable it only for browsers not enforcing the required attribute.

score 1 · Answer 1 · answered Sep 22 '15 at 13:58

1

Check if the checkValidity() function exists:

function hasFormValidation() {

    return (typeof document.createElement( 'input' ).checkValidity == 'function');

};

Call it like this:

if( hasFormValidation() ) {
    // Form Validation supported
};

answered Sep 22 '15 at 13:58

Cas Bloem

4,846
2
24
23

Reference from the HTML Standard for completion: https://html.spec.whatwg.org/multipage/forms.html#dom-cva-checkvalidity. Nice solution. – Pietro Saccardi Sep 22 '15 at 14:16
2

it returns true for Safari, even though Safari does not prevent form submission when a required field is missing – Florent2 Sep 22 '15 at 14:46
finally had to use a browser detection instead of a feature detection – Florent2 Sep 23 '15 at 15:48

Detect if the HTML5 `required` attribute is enforced

1 Answers1