<form id="customerForm">
<label>
First Name:
<input id="firstName" required />
</label>
<label>
Social Security Number:
<input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
title="Expected pattern is ###-##-####" />
</label>
<input type="submit" />
</form>
When I try that document in Chrome, it accepts the conditions and shows the error, as expected.
But when I try that document in Safari, it shows no error.
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>
Currently, Safari doesn’t yet emit any error messages for required values in form fields that the user has not provided (nor for invalid values the user has put into form fields). But you can enable it by using hacks or a polyfill. See HTML5 Form Validation Fallback (without a library) for a lightweight hack that enables it, and see h5Validate for a jQuery-based polyfill plugin.
The required attribute should be available in Safari 10.1 and newer.
来源：https://stackoverflow.com/questions/32684657/safari-is-not-acknowledging-the-required-attribute-how-to-fix-it