HTML5 Validierung mit Opera und Safari

Ich habe ein problem mit der HTML5-Validierung auf Opera und Safari.

In der Oper, die Nachricht, die Blase ist es nicht die Anzeige von text, und in safari die überprüfung nicht auftreten, wenn ich drücken Sie die Schaltfläche senden. In IE, Mozilla oder Chrome die Gültigkeitsprüfung funktioniert Prima. Könnte jemand sagen, warum das passiert ist?

Die Eingaben, die ich in meinen Formen haben den html5-standard Validierung, mit dem required-Attribut, und das ist es.

Habe ich versucht zu suchen, dieses Thema rund um das web, aber es nicht geschafft es zu finden.

Bitte helfen Sie mir.

Dank

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

Können Sie uns zeigen, einige der code, so können wir versuchen, und arbeiten Sie heraus, was Los ist? Es gibt wirklich nicht viel zu gehen auf sonst.
ich habe bearbeitet den post, um zu zeigen Sie den code. ich kann wirklich nicht herausfinden, was falsch ist

InformationsquelleAutor Marius Popa | 2013-04-27

8

Es ist eine seltsame Fehler in opera: die Nachricht wird nicht angezeigt bei Verwendung von @font-face web fonts. Ich habe auch dieses problem erlebt. Wählen Sie eine Standardschrift wie Arial, die Nachricht angezeigt bekommt. Safari unterstützt keine html5-Validierung (safari hat teilweise unterstützen, aber es gibt keine Validierung Blase). Mein Tipp ist: verwenden Sie webshims lib (http://afarkas.github.io/webshim/demos/) - große polyfill für viele Funktionen wie die Validierung.
- yeei...das war das problem. vielen Dank für die info.
- Frage mich, ob jemand weiß, eine Arbeit um für die Oper. Ich bin gezwungen, die eigene Schriften verwenden, für die Eingänge.
- Opera 15+ nicht haben dieses problem nicht mehr
- Bekomme ich noch diese in der Oper, 20. Es muss nicht das Formular abschicken, und subtil highlights, die problematische Feld in blau, aber keine Validierung tooltip. Sagte tooltip erscheint in der neuesten Chrome, IE und Firefox.
InformationsquelleAutor Anselm

Ich hatte das gleiche problem und löste es auf diese Weise

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

Nur hinzufügen, dass dieser Schnitt am Ende der Seite. Sie können entfernen Sie das laden von jQuery Schritt, wenn Sie bereits importiert haben!

InformationsquelleAutor dreampulse

Können Sie fügen Sie den folgenden (Bild im Anhang):
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>

HTML5 Validierung mit Opera und Safari

Du bist mit einem Bild? Verwenden Sie einfach basic text und css, um es so Aussehen, wie Sie wollen. Bilder laden langsamer und kann nicht übersetzt werden

InformationsquelleAutor burunoh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.