Validate HTML5 with Opera and Safari

Question

I have a problem checking HTML5 on Opera and Safari.

In Opera, the message bubble does not display text, and in safari, the check does not happen when I press the submit button. In IE, Mozilla or Chrome, validation works very well. Can anyone say why this is happening?

The inputs that I have in my forms have a standard html5 check with the required attribute and what it is.

I tried to find this topic on the Internet, but could not find it.

Please help me.

thanks

<form class="sign-in-form" action="" method="post"> <li> <label> <span>Username</span> <input placeholder="Please enter your username" name="username" type="text" tabindex="1" title="It must contain the username that you have chosen at registration" required autofocus> </label> </li> <li> <label> <span>Password</span> <input placeholder="Please enter your password" name="password" type="password" tabindex="2" title="It must contain the password that you have chosen at registration" required> </label> </li> <li> <button name="sign-in-btn" type="submit" id="sign-in-submit">Sign In</button> </li> </form> 

Answer 1

This is a strange mistake in opera: the message does not appear when using @ font-face web fonts. I also experienced this problem. When choosing a regular font such as Arial, a message is displayed. Safari does not support html5 validation (safari partially supports, but there is no validation bubble). My advice: use webshims lib ( http://afarkas.imtqy.com/webshim/demos/ ) is a great polyfill for many functions like validation.

Answer 2

I had the same problem and she solved it this way

 <script> (function() { var loadScript = function(src, loadCallback) { var s = document.createElement('script'); s.type = 'text/javascript'; s.src = src; s.onload = loadCallback; document.body.appendChild(s); }; // http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; if (isSafari || isOpera) { loadScript('//code.jquery.com/jquery-2.1.4.min.js', function () { loadScript('//cdnjs.cloudflare.com/ajax/libs/webshim/1.15.10/dev/polyfiller.js', function () { webshims.setOptions('forms', { overrideMessages: true, replaceValidationUI: false }); webshims.setOptions({ waitReady: true }); webshims.polyfill(); }); }); } })(); </script> 

Just add this, cut off at the end of your page. You can remove the jQuery download step if you have already imported it!

Answer 3

You can add the following (Image attached): http://i.stack.imgur.com/sMe9Z.png

 <style type="text/css"> input.invalid, select.invalid, textarea.invalid { border-color: #ff0000; background-image: url('../img/required.png'); background-position: right top; background-repeat: no-repeat; -moz-box-shadow: none; } input:required:valid, textarea:required:valid, select:required:valid { border: 1px solid #cccccc; background-image: none; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } </style> <form action="" method="get" accept-charset="utf-8"> <input type="text" name="name" required> </form> <script type="text/javascript"> // Force Validation function html5Validation () { //Check if validation supported && not safari return (typeof document.createElement('input').checkValidity === 'function') && !(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0); } $('form').submit(function(){ if(!html5Validation()) { var isValid = true; var $inputs = $(this).find('[required]'); $inputs.each(function(){ var $input = $(this); $input.removeClass('invalid'); if(!$.trim($input.val()).length) { isValid = false; $input.addClass('invalid'); } }); if(!isValid) { return false; } } }); </script>