HTML5 Validation with Opera and Safari

Marius Popa picture Marius Popa · Apr 27, 2013 · Viewed 12.2k times · Source

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

Anselm picture Anselm · Apr 27, 2013

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.