Sprawdzanie poprawności HTML5 za pomocą Opery i Safari

Question

Mam problem z weryfikacją HTML5 w Operze i Safari.

W przeglądarce Opera dymek wiadomości nie wyświetla żadnego tekstu, a na safari walidacja nie występuje po naciśnięciu przycisku przesyłania. W IE, Mozilli lub Chrome sprawdzanie poprawności działa dobrze. Czy ktoś może powiedzieć, dlaczego tak się dzieje?

Wejścia, które mam w moich formularzach, mają standardową walidację html5, z wymaganym atrybutem i to wszystko.

Próbowałem przeszukać ten temat w Internecie, ale nie udało mi się go znaleźć.

Proszę, pomóż mi.

Dzięki

<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

To dziwny bug w operze: komunikat nie jest wyświetlany przy użyciu @ font-face czcionek internetowych. Też doświadczyłem tego problemu. Wybierając zwykłą czcionkę, taką jak Arial, pojawia się komunikat. Safari nie obsługuje sprawdzania poprawności html5 (safari ma częściowo wsparcie, ale nie ma bańki do sprawdzania poprawności). Moja wskazówka: użyj webshims lib (http://afarkas.github.io/webshim/demos/) - świetny polyfill dla wielu funkcji, takich jak sprawdzanie poprawności.

Answer 2

Możesz dodać następujący (zdjęcie w załączeniu): 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> 

Answer 3

miałem ten sam problem i rozwiązać go w ten sposób

<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> 

Wystarczy dodać ten snipped na końcu strony. Możesz usunąć ładowany krok jQuery, jeśli już zaimportowałeś!