HTML5 Validation with Opera and Safari

Question

I am having a problem with the HTML5 validation on Opera and Safari.

In Opera, the message bubble it's not displaying any text, and in safari the validation does not occur when i press the submit button. In IE, Mozilla or Chrome the validation works just fine. Could anyone tell why is this happening?

The inputs that i have in my forms have the html5 standard validation, with the required attribute, and that's it.

I tried to search this topic around the web, but didn't manage to 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

It's a weird bug in opera: the message is not displayed when using @font-face web fonts. I also experienced this problem. Choosing a normal font like Arial, the message gets displayed. Safari doesn't support html5 validation (safari has partly support but there is no validation bubble). My tip is: use webshims lib (http://afarkas.github.io/webshim/demos/) - great polyfill for many features like validation.

Answer 2

I had the same problem and solved it in 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 snipped at the end of your page. You can remove the load jQuery step if you already have imported it!