Since the Safari browser doesn’t show a notice for empty input elements attached with the required attribute, a JavaScript fallback using the alert() function can be used instead.
I took the liberty to enhance the following solution http://wideline-studio.com/blog/html5-form-features-and-their-javascript-fallbacks to to its use of the deprecated jQuery.browser property, and having it coded for testing purposes only.
Please use the following code instead:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$( document ).on( 'submit', '#form-favourite', function( event ) { var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor); var flag = false; if ( isSafari ) { $('#form-favourite [required]').each( function( index ) { if ( ! $(this).val() ) { //If at least one required value is empty, then ask to fill all required fields. alert( 'Please fill all required fields.' ); flag = true; return; } }); } if ( flag ) { event.preventDefault(); } }); |
Resources: http://stackoverflow.com/questions/12625876/how-to-detect-chrome-and-safari-browser-webkit
Enjoy,
Yaniv
