Tun alle Browser noch Unterstützung für HTML5 ist checkValidity () - Methode?

Die HTML5-Spezifikation definiert einige sehr interessante Validierung Komponenten, einschließlich Muster (für die Validierung gegen ein Regexp) und erforderlich (für die Markierung eines Feldes als erforderlich). Als am besten ich kann erzählen, aber kein browser doch tatsächlich hat jede Validierung basiert auf diesen Parametern.

Fand ich eine Vergleich von HTML5-Unterstützung in den verschiedenen Suchmaschinen, aber es gibt keine Informationen über die Validierung gibt. In den Browsern, die ich probiert habe (Firefox 3.5.8 und Safari 4.0.4), kein Objekt hat einen checkValidity() Methode, so kann ich nicht ausführen, Validierungen, auch wenn ich Sie definieren.

Gibt es keinen support für dieses feature gibt, so kann ich Experimentieren?

InformationsquelleAutor James A. Rosen | 2010-03-10

Getestet habe ich die folgenden in Google Chrome:

<!DOCTYPE html>
<html>
  <body>
    <style>
      .valid { color: #0d0; }
      .invalid { color: #d00; }
    </style>
    <div id="output"></div>
    <script>
      function check(input) {
        var out = document.getElementById('output');
        if (input.validity) {
          if (input.validity.valid === true) {
            out.innerHTML = "<span class='valid'>" + input.id +
                            " is valid</span>";
          } else {
            out.innerHTML = "<span class='invalid'>" + input.id +
                            " is not valid</span>";
          }
        }
        console.log(input.checkValidity());
      };
    </script>
    <form id="testform" onsubmit="return false;">
      <label>Required:
        <input oninput="check(this)" id="required_input" 
               required />
      </label><br>
      <label>Pattern ([0-9][A-Z]{3}):
        <input oninput="check(this)" id="pattern_input" 
               pattern="[0-9][A-Z]{3}"/>
      </label><br>
      <label>Min (4):
        <input oninput="check(this)" id="min_input" 
               type=number min=4 />
      </label><br>
    </form>
  </body>
</html>

Stangely, die <element>.validity.valid Eigenschaft scheint, um korrekt zu arbeiten, aber das aufrufen <element>.checkValidity() gibt immer true zurück, so wie es aussieht, ist noch nicht implementiert.

Müssen Sie rufen Sie checkValidity auf die form, nicht die Eingänge.
Wo siehst du das? dev.w3.org/html5/spec/Overview.html, sagt checkValidity ist eine member-Funktion auf HTMLObjectElement und: "Wenn die checkValidity () - Methode wird aufgerufen, wenn das element ist ein Kandidat für die constraint-Validierung... der user-agent muss Feuer ein einfaches Ereignis mit dem Namen ungültig, der stornierbar ... auf das element, und geben Sie false zurück. "Die gleiche Spezifikation, die definiert, "Kandidat für die constraint-Validierung" als "Einen der aufgelisteten form-element verbunden ist ein Kandidat für die constraint-Validierung außer wenn eine Bedingung ausgeschlossen, die element von constraint-Validierung." Scheint, dass die Eingänge gelten.
Mein Verständnis war, dass der Aufruf checkValidity() auf dem Formular würde einfach delegieren zu jeder seiner inputs (und selects und textareas) in die Reihe, aber ich kann nicht sagen, ich habe eigentlich eine Referenz für diese.
Das klingt sicherlich vernünftig, aber es sollte auch Eingänge als auch
Aufruf checkValidity nur bewirkt, dass ein Ereignis ausgelöst wird, zu prüfen, die tatsächliche Wirksamkeit, die Sie haben, um die invalid - event auf dem element

InformationsquelleAutor Arne Roomann-Kurrik

8

Sicher. Opera und Chrom. Aber können Sie selbst testen:
```
function supportsValidity(){
  var i = document.createElement('input');
  return typeof i.validity === 'object'
}
```
Hier ist ein link zu einer sandbox, wo Sie sehen können, Opera und Chrome in Aktion:
http://jsfiddle.net/vaZDn/light/

Funktioniert auch in firefox 4.0.1
Funktioniert auch im IE 10

InformationsquelleAutor miketaylr
4

checkValidity() ist suppost zu arbeiten, entweder in der form als ganzes oder eine individuelle Eingabe.

"Darüber hinaus, die checkValidity () - Methode ausgeführt werden kann, die entweder auf ein einzelnes Feld oder die form als ganzes, und gibt true oder false zurück. Ausführen der Methode wird auch programmatisch Feuer der invalid-Ereignis für alle ungültigen Felder, oder, wenn ausgeführt auf einem einzigen Bereich, nur für dieses element."

entnommen aus "a List Apart" - http://www.alistapart.com/articles/forward-thinking-form-validation/

"bilden . checkValidity()
Gibt true zurück, wenn das Formular die Steuerelemente sind alle gültig sind; andernfalls gibt Sie false zurück."
http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation

"gültig = element . checkValidity()
Gibt true zurück, wenn das element s-Wert hat keine Aussagekraft, Probleme, ansonsten false. Feuert ein invalid-Ereignis zu dem element, in dem letzteren Fall."
http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation

W3C - working draft.

InformationsquelleAutor cpi
3

Laut Tauchen Sie ein in HTML5:

Wenn ein Opera-Benutzer versucht, zu übermitteln ein Formular mit einem Feld, Opera bietet automatisch RFC-konforme E-Mail-Validierung, auch wenn scripting deaktiviert ist. Opera bietet auch die Validierung von web-Adressen in Felder eingegeben und die zahlen in die Felder. Die Validierung der zahlen noch berücksichtigt, die min-und max-Attribute, so dass Opera nicht lassen, senden Sie das Formular, wenn Sie eine Zahl eingeben, die ist zu groß.

(Der zitierte Absatz ist über die letzten in dem Artikel.)

So weit ich bin mir bewusst,- und bedenkt ich habe nicht getestet mit Opera 10, nehme ich Ihr Wort für es - kein anderer browser noch überprüft, Formulare automatisch.

InformationsquelleAutor David Thomas
1

Opera 10 hat einige HTML5 Formular-Validierung http://dev.opera.com/articles/view/improve-your-forms-using-html5/. Aber, ich glaube nicht, es hat checkValidation().

InformationsquelleAutor Adam
1

Wenn du meinst checkValidity (), dann, ja, Opera unterstützt.

Disclosurey thang: ich arbeite für die Oper.

Seit Sie dort arbeiten... jede chance, Sie könnten etwas Licht in den Kommentar-thread oben... ob oder nicht es funktionieren sollte, auf das übergeordnete Formular? stackoverflow.com/questions/2421218/...

InformationsquelleAutor bruce

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.