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>

Satisfactory

Can you show us some of the code so we can try and work out what is going on? There really isn't much to go on otherwise. – Estray

i have edited the post in order to show you the code. i really can't figure it out what's wrong – Satisfactory

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.

Extenuate

yeei...that was the problem. thank you very much for the info. – Satisfactory

wondering if someone knows a work around for Opera. I'm forced to use custom fonts for inputs. – Marandamarasca

Opera 15+ doesn´t have this problem anymore – Extenuate

I still get this in Opera 20. It doesn't submit the form, and subtly highlights the offending field in blue, but no validation tooltip. Said tooltip appears in latest Chrome, IE and Firefox. – Decry

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);
  };

  // https://mcmap.net/q/42092/-how-to-detect-safari-chrome-ie-firefox-and-opera-browsers
  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!

Marchant

Answer 3

You can add the following (Image attached): https://i.sstatic.net/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>

Haemachrome

You're using an image? Just use basic text and css to get it to look the way you want. Images load in slower and can't be translated – Erne