Einschraenkungs-valiedierung.php

Quell Code

<div class="content" id="article-content">
<h2>Einführung</h2>
<p>Das Validieren von Formularen war bekanntermaßen eine schmerzhafte Entwicklungserfahrung. Das Implementieren der clientseitigen Validierung auf benutzerfreundliche, entwicklerfreundliche und zugängliche Weise ist schwierig. Vor HTML5 gab es keine Möglichkeit, die Validierung nativ zu implementieren. Daher haben Entwickler auf eine Vielzahl von JavaScript-basierten Lösungen zurückgegriffen.</p>
<p>Um die Entwickler zu entlasten, hat HTML5 ein Konzept eingeführt, das als <a href="https://www.whatwg.org/specs/web-apps/current-work/#constraint-validation">Integritätsregelungsvalidierung bezeichnet wird</a> - eine native Methode zur Implementierung der clientseitigen Validierung auf Webformularen.</p>
<p>Trotz der Verfügbarkeit in der neuesten Version aller gängigen Browser ist die Gültigkeitsprüfung von Einschränkungen ein Thema, das weitgehend auf Präsentationen und Demos beschränkt ist. Mein Ziel beim Schreiben ist es, ein wenig Licht in die neuen APIs zu bringen, um Entwicklern dabei zu helfen, bessere Webformulare für alle zu erstellen.</p>
<p>In diesem Tutorial werde ich:</p>
<ul>
<li>Präsentieren Sie einen umfassenden Überblick über die Gültigkeitsprüfung von Einschränkungen.</li>
<li>Informieren Sie sich über die aktuellen Einschränkungen der Spezifikations- und Browserimplementierungen.</li>
<li>Erläutern Sie, wie Sie die HTML5-Einschränkungsüberprüfung jetzt in Ihren Formularen verwenden können.</li>
</ul>
<h2 id="toc-what-is-it">Was ist die Constraint-Validierung?</h2>
<p>Der Kern der Einschränkungsvalidierung ist ein Algorithmus, der von Browsern ausgeführt wird, wenn ein Formular gesendet wird, um seine Gültigkeit zu bestimmen. Um diese Bestimmung zu machen, verwendet der Algorithmus neues HTML5 - Attribut <code><a href="https://www.whatwg.org/specs/web-apps/current-work/#attr-input-min">min</a></code>, <code><a href="https://www.whatwg.org/specs/web-apps/current-work/#attr-input-max">max</a></code>, <code><a href="https://www.whatwg.org/specs/web-apps/current-work/#attr-input-step">step</a></code>, <code><a href="https://www.whatwg.org/specs/web-apps/current-work/#the-pattern-attribute">pattern</a></code>, und <code><a href="https://www.whatwg.org/specs/web-apps/current-work/#attr-input-required">required</a></code>sowie bestehende Attribute <code><a href="https://www.whatwg.org/specs/web-apps/current-work/#attr-fe-maxlength">maxlength</a></code>und <code><a href="https://www.whatwg.org/specs/web-apps/current-work/#attr-input-type">type</a></code>.
</p><p>Nehmen Sie als Beispiel dieses Formular mit einer leeren <code>required</code>Texteingabe:</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlicher</span><span class="pln"> </span></span><span class="atn"><span class="atn">Wert</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">""</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"submit"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Submit"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln">
</span><span class="tag"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/HdSqt/">Versuch es</a>
<p>Wenn Sie versuchen, dieses Formular so wie es ist zu senden, wird <a href="https://caniuse.com/#feat=form-validation">die Übermittlung durch unterstützende Browser</a> verhindert und Folgendes angezeigt:</p>
<ul class="browser-screenshot-list">
<li>
Chrome 21
<img src="images/Einschraenkungsvalidierung/Chrome.png" alt="Chrome 21-Anzeige">
</li>
<li>
Firefox 15
<img src="images/Einschraenkungsvalidierung/Firefox.png" alt="Firefox 15-Anzeige">
</li>
<li>
Internet Explorer 10
<img src="images/Einschraenkungsvalidierung/IE10.png" alt="IE10-Anzeige">
</li>
<li>
Opera 12
<img src="images/Einschraenkungsvalidierung/Opera.png" alt="Opera 12-Anzeige">
</li>
<li>
Opera Mobile
<img src="images/Einschraenkungsvalidierung/OperaMobile.png" alt="Opera Mobile-Anzeige">
</li>
<li>
Chrome für Android
<img src="images/Einschraenkungsvalidierung/ChromeForAndroid.png" alt="Chrome für Android-Anzeige">
</li>
<li>
Firefox für Android
<img src="images/Einschraenkungsvalidierung/FirefoxForAndroid.png" alt="Firefox für Android-Anzeige">
</li>
</ul>
<p>Gemäß der Spezifikation bleibt es dem Browser selbst überlassen, wie Fehler dem Benutzer angezeigt werden. Die Spezifikation bietet jedoch eine vollständige DOM-API, neue HTML-Attribute und CSS-Hooks, mit denen Autoren die Erfahrung anpassen können.</p>
<h2 id="toc-dom-api">DOM API</h2>
<p>Die <a href="https://www.whatwg.org/specs/web-apps/current-work/#constraint-validation-api">API für</a> die <a href="https://www.whatwg.org/specs/web-apps/current-work/#constraint-validation-api">Gültigkeitsprüfung von Einschränkungen</a> fügt den DOM-Knoten die folgenden Eigenschaften / Methoden hinzu.</p>
<h3 id="toc-willValidate">willValidate</h3>
<p>Die <code>willValidate</code>Eigenschaft gibt an, ob der Knoten ein Kandidat für die Gültigkeitsprüfung von Einschränkungen ist. Für <a href="https://www.whatwg.org/specs/web-apps/current-work/#category-submit">einreichbare Elemente</a> wird dies festgelegt, <code>true</code>sofern der Knoten nicht aus irgendeinem Grund von der <a href="https://www.whatwg.org/specs/web-apps/current-work/#barred-from-constraint-validation">Gültigkeitsprüfung für Einschränkungen ausgeschlossen ist</a> , z. B. wenn er das <code>disabled</code>Attribut besitzt.</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;div</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"one"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> &lt;/ div&gt; </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"two"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"three"</span><span class="pln"> </span></span><span class="atn"><span class="atn">disabled</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    -Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'one' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">willValidate </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// undefiniertes </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'two' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">willValidate </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// wahres </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">.</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">willValidate </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// false </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
<h3 id="toc-validity">Gültigkeit</h3>
<p>Die <a href="https://www.whatwg.org/specs/web-apps/current-work/#dom-cva-validity"><code>validity</code></a>Eigenschaft eines DOM-Knotens gibt ein <a href="https://www.whatwg.org/specs/web-apps/current-work/#validitystate"><code>ValidityState</code></a>Objekt zurück, das eine Reihe von booleschen Eigenschaften enthält, die sich auf die Gültigkeit der Daten im Knoten beziehen.</p>
<ul>
<li>
<code>customError</code>:
<code>true</code>Wenn für einen Anruf an eine benutzerdefinierte Gültigkeitsnachricht festgelegt wurde <code>setCustomValidity()</code>.
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">customError </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">setCustomValidity </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'Invalid' </span></span><span class="pun"><span class="pln">); </span></span><span class="pln"><span class="pln">
    dokumentieren </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">customError </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// true </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
</li>
<li>
<code>patternMismatch</code>:
<code>true</code>Wenn der Knoten <code>value</code>nicht mit seinem <code>pattern</code>Attribut übereinstimmt .
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="atn"><span class="atn">pattern</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"[0-9] {4}"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"1234"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar"</span><span class="pln"> </span></span><span class="atn"><span class="atn">pattern</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"[0-9] {4}"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"ABCD"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">patternMismatch </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">patternMismatch </span></span><span class="pun"><span class="pln">;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
</li>
<li>
<code>rangeOverflow</code>:
<code>true</code>Wenn der Knoten <code>value</code>größer als sein <code>max</code>Attribut ist.
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"number"</span><span class="pln"> </span></span><span class="atn"><span class="atn">max</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"1"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"number"</span><span class="pln"> </span></span><span class="atn"><span class="atn">max</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"3"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">rangeOverflow </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">rangeOverflow</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// true </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
</li>
<li>
<code>rangeUnderflow</code>:
<code>true</code>Wenn der Knoten <code>value</code>kleiner als sein <code>min</code>Attribut ist.
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"number"</span><span class="pln"> </span></span><span class="atn"><span class="atn">min</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"3"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"number"</span><span class="pln"> </span></span><span class="atn"><span class="atn">min</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"1"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">rangeUnderflow </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar' </span></span><span class="pun"><span class="pln">).</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">rangeUnderflow </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// true </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
</li>
<li>
<code>stepMismatch</code>:
<code>true</code>Wenn der Knoten <code>value</code>gemäß seinem <code>step</code>Attribut ungültig ist .
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"number"</span><span class="pln"> </span></span><span class="atn"><span class="atn">step</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"4"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"number"</span><span class="pln"> </span></span><span class="atn"><span class="atn">step</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"3"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">stepMismatch </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">stepMismatch</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// true </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
</li>
<li>
<code>tooLong</code>:
<code>true</code>Wenn der Knoten <code>value</code>sein <code>maxlength</code>Attribut überschreitet . Alle Browser verhindern dies, indem sie verhindern, dass Benutzer Werte eingeben, die die maximale Länge überschreiten. Obwohl selten, ist es möglich, dass diese Eigenschaft <code>true</code>in einigen Browsern vorhanden ist. Ich habe darüber geschrieben, wie das <a href="http://tjvantoll.com/2012/10/17/maxlength-constraint-validation-oddities/">hier</a> möglich <a href="http://tjvantoll.com/2012/10/17/maxlength-constraint-validation-oddities/">ist</a> .
</li>
<li>
<code>typeMismatch</code>:
<code>true</code>Wenn der eines Eingabeknotens <code>value</code>gemäß seinem <code>type</code>Attribut ungültig ist .
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"url"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"http://foo.com"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"url"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span><span class="pln">
</span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"email"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo@foo.com"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"email"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span><span class="pln">
</span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">typeMismatch </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">typeMismatch </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">//wahr</span></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"><span class="pln">
</span><span class="pln">
    dokumentieren </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo2' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">typeMismatch </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar2' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">typeMismatch </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// true </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
</li>
<li>
<code>valueMissing</code>:
<code>true</code>Wenn der Knoten ein <code>required</code>Attribut hat, aber keinen Wert.
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlicher</span><span class="pln"> </span></span><span class="atn"><span class="atn">Wert</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"bar"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlicher</span><span class="pln"> </span></span><span class="atn"><span class="atn">Wert</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">""</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">valueMissing </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'bar' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">valueMissing </span></span><span class="pun"><span class="pln">;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
</li>
<li>
<code>valid</code>:
<code>true</code>wenn alle oben aufgeführten Gültigkeitsbedingungen erfüllt sind <code>false</code>.
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"valid-1"</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"><span class="pln"> </span><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlicher</span><span class="pln"> </span></span><span class="atn"><span class="atn">Wert</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"valid-2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlicher</span><span class="pln"> </span></span><span class="atn"><span class="atn">Wert</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">""</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'valid-1' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">gültig </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// wahres </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'valid-2' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">Gültigkeit </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">gültig </span></span><span class="pun"><span class="pln">;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"><span class="pln">
</span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span></pre>
</li>
</ul>
<h3 id="toc-validationMessage">validationMessage</h3>
<p>Die <code>validationMessage</code>Eigenschaft eines DOM-Knotens enthält die Nachricht, die der Browser dem Benutzer anzeigt, wenn die Gültigkeit eines Knotens überprüft wird und fehlschlägt.</p>
<p>Der Browser stellt eine lokalisierte Standardnachricht für diese Eigenschaft bereit. Wenn der DOM-Knoten kein Kandidat für die Gültigkeitsprüfung einer Einschränkung ist oder wenn der Knoten gültige Daten enthält, <code>validationMessage</code>wird eine leere Zeichenfolge festgelegt.</p>
<p><i>Hinweis: Zum jetzigen Zeitpunkt füllt Opera diese Eigenschaft nicht standardmäßig aus. Es wird dem Benutzer eine korrekte Fehlermeldung angezeigt, es wird nur die Eigenschaft nicht ausgefüllt.</i></p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlich</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'foo' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">validationMessage </span></span><span class="pun"><span class="pln">; </span></span><span class="com"><span class="pln">// Chrome -&gt; 'Bitte füllen Sie dieses Feld aus.' </span></span><span class="com"><span class="pln">// Firefox -&gt; 'Bitte füllen Sie dieses Feld aus.' </span></span><span class="com"><span class="pln">// Safari -&gt; 'Wert fehlt' </span></span><span class="com"><span class="pln">// IE10 -&gt; 'Dies ist ein Pflichtfeld.' </span></span><span class="com"><span class="pln">// Opera -&gt; '' </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="com"></span><span class="pln"><span class="pln">
    </span></span><span class="com"></span><span class="pln"><span class="pln">
    </span></span><span class="com"></span><span class="pln"><span class="pln">
    </span></span><span class="com"></span><span class="pln"><span class="pln">
    </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
<h3 id="toc-checkValidity">checkValidity ()</h3>
<p>Die <code>checkValidity</code>Methode auf einem Formularelementknoten (z. B. Eingabe, Auswahl, Textbereich) gibt zurück, <code>true</code>ob das Element gültige Daten enthält.</p>
<p>Auf Formularknoten wird zurückgegeben, <code>true</code>wenn alle untergeordneten Elemente des Formulars gültige Daten enthalten.</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"form-1"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"input-1"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"><span class="pln"> </span><span class="atn">required</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt; </span></span><span class="tag"><span class="tag">&lt;form</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"form-2"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"input-2"</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt; </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'form-1' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">checkValidity </span></span><span class="pun"><span class="pln">(); </span></span><span class="com"><span class="pln">// falsches </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'input-1' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">checkValidity </span></span><span class="pun"><span class="pln">();</span></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">  </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"><span class="pln">//falsch</span></span><span class="pln"><span class="pln">
</span><span class="pln">
    dokumentieren </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'form-2' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">checkValidity </span></span><span class="pun"><span class="pln">(); </span></span><span class="com"><span class="pln">// wahres </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'input-2' </span></span><span class="pun"><span class="pln">). </span></span><span class="pln"><span class="pln">checkValidity </span></span><span class="pun"><span class="pln">(); </span></span><span class="com"><span class="pln">// true </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln">  </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
<p>Außerdem wird jedes Mal, wenn die Gültigkeit eines Formularelements über überprüft wird <code>checkValidity</code>und fehlschlägt, ein <code>invalid</code>Ereignis für diesen Knoten ausgelöst. Wenn Sie mit dem obigen Beispielcode etwas ausführen möchten, wenn der Knoten mit der ID <code>input-1</code>überprüft wurde und ungültige Daten enthielt, können Sie Folgendes verwenden:</p>
<pre class="prettyprint lang-js"><span class="pln"><span class="pln">dokumentieren </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'input-1'</span><span class="pln"> </span></span><span class="pun"><span class="pun">).</span><span class="pln"> </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'ungültig'</span><span class="pln"> </span></span><span class="pun"><span class="pun">,</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">function</span><span class="pln"> </span></span><span class="pun"><span class="pun">()</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="com"><span class="com">// ... </span></span><span class="pun"><span class="com">}, </span></span><span class="kwd"><span class="com">false </span></span><span class="pun"><span class="com">);</span></span><span class="pln"><span class="com"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="com"> </span></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="com"></span><span class="pln"><span class="pln">
</span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span></pre>
<p>Es gibt kein gültiges Ereignis. Sie können das <code>change</code>Ereignis jedoch für Benachrichtigungen verwenden, wenn sich die Gültigkeit eines Felds ändert.</p>
<pre class="prettyprint lang-js"><span class="pln"><span class="pln">dokumentieren </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'input-1'</span><span class="pln"> </span></span><span class="pun"><span class="pun">).</span><span class="pln"> </span></span><span class="pln"><span class="pln">addEventListener</span></span><span class="pun"><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'change'</span><span class="pln"> </span></span><span class="pun"><span class="pun">,</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">function</span><span class="pln"> </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="pln"><span class="pln">event </span></span><span class="pun"><span class="pun">)</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">if</span><span class="pln"> </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="pln"><span class="pln">event </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">target </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">validity </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">valid </span></span><span class="pun"><span class="pun">)</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="com"><span class="com">// Feld enthält gültige Daten. </span></span><span class="pun"><span class="com">} </span></span><span class="kwd"><span class="com">else </span></span><span class="pun"><span class="com">{ </span></span><span class="com"><span class="com">// Feld enthält ungültige Daten. </span></span><span class="pun"><span class="com">} </span></span><span class="pun"><span class="com">}, </span></span><span class="kwd"><span class="com">false </span></span><span class="pun"><span class="com">);</span></span><span class="pln"><span class="com"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="com"> </span></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="com"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="com"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln">
</span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span></pre>
<h3 id="toc-setCustomValidity">setCustomValidity ()</h3>
<p>Die <code>setCustomValidity</code>Methode ändert die <code>validationMessage</code>Eigenschaft und ermöglicht es Ihnen, benutzerdefinierte Validierungsregeln hinzuzufügen.</p>
<p>Durch das Festlegen der <code>validationMessage</code>Übergabe in einer leeren Zeichenfolge wird das Feld als gültig markiert und durch das Übergeben einer anderen Zeichenfolge wird das Feld als ungültig markiert. Leider gibt es keine Möglichkeit, das zu setzen, <code>validationMessage</code>ohne auch die Gültigkeit eines Feldes zu ändern.</p>
<p>Wenn Sie beispielsweise zwei Kennwortfelder hatten, deren Gleichheit Sie erzwingen möchten, können Sie Folgendes verwenden:</p>
<pre class="prettyprint lang-js"><span class="kwd"><span class="kwd">if</span><span class="pln"> </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="pln"><span class="pln">document </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'password1'</span><span class="pln"> </span></span><span class="pun"><span class="pun">).</span><span class="pln"> </span></span><span class="pln"><span class="pln">value </span></span><span class="pun"><span class="pun">!</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span></span><span class="pln"><span class="pln">document</span></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'password2'</span><span class="pln"> </span></span><span class="pun"><span class="pun">).</span><span class="pln"> </span></span><span class="pln"><span class="pln">value </span></span><span class="pun"><span class="pun">)</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'password1'</span><span class="pln"> </span></span><span class="pun"><span class="pun">).</span><span class="pln"> </span></span><span class="pln"><span class="pln">setCustomValidity </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'Passwörter müssen übereinstimmen.'</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span><span class="pln"> </span></span><span class="pun"><span class="pun">}</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">else</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'password1'</span><span class="pln"> </span></span><span class="pun"><span class="pun">).</span><span class="pln"> </span></span><span class="pln"><span class="pln">setCustomValidity </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">''</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span><span class="pln"> </span></span><span class="pun"><span class="pun">}</span></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
</span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln">
</span><span class="pun"></span></pre>
<h2 id="toc-html-attributes">HTML-Attribute</h2>
<p>Wir haben bereits gesehen , dass die <code>maxlength</code>, <code>min</code>, <code>max</code>, <code>step</code>, <code>pattern</code>, und <code>type</code>Attribute durch den Browser zu constrain Daten verwendet werden. Für die Gültigkeitsprüfung von Einschränkungen gibt es zwei zusätzliche relevante Attribute - <code>novalidate</code>und <code>formnovalidate</code>.</p>
<h3>Novalidat</h3>
<p>Das boolesche <code>novalidate</code>Attribut kann auf Formknoten angewendet werden. Wenn vorhanden, gibt dieses Attribut an, dass die Daten des Formulars beim Senden nicht überprüft werden sollen.</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form</span><span class="pln"> </span></span><span class="atn"><span class="atn">novalidate</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">required</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"submit"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Submit"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln">
</span><span class="tag"></span></pre>
<p>Da das obige Formular das <code>novalidate</code>Attribut hat, wird es gesendet, obwohl es eine leere erforderliche Eingabe enthält.</p>
<h3>Formnovalidat</h3>
<p>Das boolesche <code>formnovalidate</code>Attribut kann auf Schaltflächen- und Eingabeknoten angewendet werden, um die Formularüberprüfung zu verhindern. Beispielsweise:</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlich</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="tag"><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"submit"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Validate"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">" </span></span><span class="atn"><span class="atv">submit </span></span><span class="atv"><span class="atv">"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Do NOT Validate"</span><span class="pln"> </span></span><span class="atn"><span class="atn">formnovalidate</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln">
</span><span class="tag"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/5nD83/">Versuch es</a>
<p>Wenn Sie auf die Schaltfläche "Bestätigen" klicken, wird die Übermittlung des Formulars aufgrund der leeren Eingabe verhindert. Wenn Sie jedoch auf die Schaltfläche "NICHT validieren" klicken, wird das Formular trotz der ungültigen Daten aufgrund des <code>formnovalidate</code>Attributs gesendet.</p>
<h2 id="toc-inline-bubbles">CSS-Haken</h2>
<p>Beim Schreiben einer wirksamen Formularüberprüfung geht es nicht nur um die Fehler selbst; Ebenso wichtig ist es, dem Benutzer die Fehler auf benutzerfreundliche Weise anzuzeigen, und unterstützende Browser bieten Ihnen CSS-Hooks, um genau das zu tun.
</p><h3>: ungültig und: gültig</h3>
<p>In unterstützten Browsern <code>:valid</code>stimmen die Pseudoklassen mit Formularelementen überein, die den angegebenen Einschränkungen entsprechen, und die <code>:invalid</code>Pseudoklassen stimmen mit denen überein, die diese Bedingungen nicht erfüllen .</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"foo"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlich</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"><span class="pln"> </span><span class="atv">"bar"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt; </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">querySelectorAll </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'input [type = "text"]: invalid' </span></span><span class="pun"><span class="pln">); </span></span><span class="com"><span class="pln">// Entspricht der Eingabe # foo </span></span><span class="pln"><span class="pln">
    document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">querySelectorAll </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'input [type = "text"]: valid' </span></span><span class="pun"><span class="pln">); </span></span><span class="com"><span class="pln">// Entspricht der Eingabe-Leiste </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">   </span></span><span class="com"></span><span class="pln">
</span><span class="tag"></span></pre>
<h3>Zurücksetzen des Standardstils</h3>
<p>Standardmäßig legt Firefox ein rotes <code>box-shadow</code>und IE10 mit einem roten <code>outline</code>auf <code>:invalid</code>Feldern.</p>
<ul class="browser-screenshot-list">
<li>
Firefox 15
<img src="images/Einschraenkungsvalidierung/Firefox.png" alt="Firefox zeigt standardmäßig fehlerhafte Felder an">
</li>
<li>
Internet Explorer 10
<img src="images/Einschraenkungsvalidierung/IE10.png" alt="IE10 Standard-Fehlerfeldanzeige">
</li>
</ul>
<p>WebKit-basierte Browser und Opera tun standardmäßig nichts. Wenn Sie einen konsistenten Ausgangspunkt wünschen, können Sie die Standardeinstellungen wie folgt unterdrücken.</p>
<pre class="prettyprint lang-css"><span class="pun"><span class="pun">:</span><span class="pln"> </span></span><span class="pln"><span class="pln">ung</span><span class="pun">ü</span><span class="pln">ltig </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">box-shadow</span><span class="pln"> </span></span><span class="pun"><span class="pun">:</span><span class="pln"> </span></span><span class="pln"><span class="pln">keine </span></span><span class="pun"><span class="pun">;</span><span class="pln"> </span></span><span class="com"><span class="pun">/</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> FF </span><span class="pun">*</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">outline</span><span class="pln"> </span></span><span class="pun"><span class="pun">:</span><span class="pln"> </span></span><span class="lit"><span class="lit">0</span><span class="pln"> </span></span><span class="pun"><span class="pun">;</span><span class="pln"> </span></span><span class="com"><span class="pun">/</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> IE </span><span class="lit">10</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span></span><span class="pun"><span class="pun">}</span></span><span class="pln"><span class="pln">
    </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="com"></span><span class="pln"><span class="pln">
    </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="lit"></span><span class="pun"></span><span class="pln"><span class="pln">       </span></span><span class="com"></span><span class="pln">
</span><span class="pun"></span></pre>
<p>Ich habe eine ausstehende <a href="https://github.com/necolas/normalize.css/pull/124">Pull-Anfrage</a> , um zu diskutieren, ob diese Normalisierung in <a href="https://github.com/necolas/normalize.css">normalize.css gehört</a> .</p>
<h2 id="toc-inline-bubbles">Inline-Blasen</h2>
<p>Eine größere Anzeigedifferenz ist das Aussehen der Inline-Überprüfungsblasen, die der Browser in ungültigen Feldern anzeigt. WebKit ist jedoch das einzige Renderingmodul, mit dem Sie die Sprechblase anpassen können. In WebKit können Sie mit den folgenden 4 Pseudoklassen experimentieren, um ein benutzerdefinierteres Erscheinungsbild zu erhalten.</p>
<pre class="prettyprint lang-css"><span class="pun"><span class="pun">::</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span></span><span class="pln"><span class="pln">webkit-validation-bubble </span></span><span class="pun"><span class="pun">{}</span><span class="pln"> </span></span><span class="pun"><span class="pun">::</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span></span><span class="pln"><span class="pln">webkit-validation-bubble-message </span></span><span class="pun"><span class="pun">{}</span><span class="pln"> </span></span><span class="pun"><span class="pun">::</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span></span><span class="pln"><span class="pln">webkit-validation-bubble-arrow </span></span><span class="pun"><span class="pun">{}</span><span class="pln"> </span></span><span class="pun"><span class="pun">::</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span></span><span class="pln"><span class="pln">webkit-validation-bubble-arrow-clipper </span></span><span class="pun"><span class="pun">{}</span></span><span class="pln"><span class="pln">
</span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
</span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln">
</span><span class="pun"></span><span class="pln"></span><span class="pun"></span></pre>
<h3>Entfernen der Standardblase</h3>
<p>Da Sie das Aussehen der Sprechblasen in WebKit nur anpassen können, können Sie die Standard-Sprechblase unterdrücken und Ihre eigenen implementieren, wenn Sie ein benutzerdefiniertes Aussehen für alle unterstützten Browser wünschen. Im Folgenden werden die Standard-Inline-Überprüfungsblasen aller Formulare auf einer Seite deaktiviert.</p>
<pre class="prettyprint lang-js"><span class="kwd"><span class="kwd">var</span><span class="pln"> </span></span><span class="pln"><span class="pln">forms </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="pln"><span class="pln">document </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementsByTagName </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'form'</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">for</span><span class="pln"> </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">var</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="lit"><span class="lit">0</span><span class="pln"> </span></span><span class="pun"><span class="pun">;</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">&lt;</span><span class="pln"> </span></span><span class="pln"><span class="typ">Formulare</span><span class="pln"> </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">L</span><span class="pun">ä</span><span class="pln">nge </span></span><span class="pun"><span class="pun">;</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">++)</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    </span><span class="typ">Formulare</span><span class="pln"> </span></span><span class="pun"><span class="pun">[</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">].</span><span class="pln"> </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'ungültig'</span><span class="pln"> </span></span><span class="pun"><span class="pun">,</span><span class="pln"> </span></span><span class="kwd"><span class="typ">Funktion</span><span class="pln"> </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="pln"><span class="pln">e </span></span><span class="pun"><span class="pun">)</span></span><span class="pln"><span class="pln">
</span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="kwd"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="lit"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span></span><span class="pln"><span class="pln">
        e </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">preventDefault </span></span><span class="pun"><span class="pun">();</span><span class="pln"> </span></span><span class="com"><span class="com">// Implementiere möglicherweise deine eigene hier. </span></span><span class="pun"><span class="com">}, </span></span><span class="kwd"><span class="com">true </span></span><span class="pun"><span class="com">); </span></span><span class="pun"><span class="com">}</span></span><span class="pln"><span class="pln">
        </span></span><span class="com"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln">
</span><span class="pun"></span></pre>
<p>Wenn Sie die Standardblasen unterdrücken, stellen Sie sicher, dass Sie den Benutzern nach ungültigen Formularübermittlungen Fehler anzeigen. Derzeit sind die Blasen das einzige Mittel, mit dem Browser anzeigen, dass ein Fehler aufgetreten ist.</p>
<h2 id="toc-current-implementation-issues">Aktuelle Implementierungsprobleme und Einschränkungen</h2>
<p>Während diese neuen APIs der clientseitigen Formularvalidierung viel Kraft verleihen, gibt es einige Einschränkungen in Bezug auf die Funktionalität.</p>
<h3 id="toc-setCustomValidity">setCustomValidity</h3>
<p>Das einfache Festlegen <code>validationMessage</code>eines Feldes <code>setCustomValidity</code>funktioniert, aber wenn die Formulare komplexer werden, werden eine Reihe von Einschränkungen der <code>setCustomValidity</code>Methode offensichtlich.</p>
<p><b>Problem Nr. 1</b> : Behandlung mehrerer Fehler in einem Feld</p>
<p>Das Aufrufen <code>setCustomValidity</code>eines Knotens überschreibt einfach dessen <code>validationMessage</code>. Wenn Sie also <code>setCustomValidity</code>zweimal auf demselben Knoten anrufen, wird beim zweiten Aufruf einfach der erste überschrieben. Es gibt keinen Mechanismus, mit dem eine Reihe von Fehlermeldungen behandelt oder dem Benutzer mehrere Fehlermeldungen angezeigt werden können.</p>
<p>Eine Möglichkeit, dies zu handhaben, besteht darin, zusätzliche Nachrichten an die Knoten <code>validationMessage</code>als solche anzuhängen .</p>
<pre class="prettyprint lang-js"><span class="kwd"><span class="kwd">var</span><span class="pln"> </span></span><span class="pln"><span class="pln">foo </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="pln"><span class="pln">document </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'foo'</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span><span class="pln"> </span></span><span class="pln"><span class="pln">
foo </span></span><span class="pun"><span class="pun">.</span></span><span class="pln"><span class="pln">setCustomValidity </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="pln"><span class="pln">foo </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">validationMessage </span></span><span class="pun"><span class="pun">+</span><span class="pln"> </span></span><span class="str"><span class="str">'Ein Fehler ist aufgetreten'</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span></span><span class="pln"><span class="pln"> </span></span><span class="str"></span><span class="pun"></span></pre>
<p>Sie können keine HTML- oder Formatierungszeichen übergeben, sodass Sie bei der Verkettung von Zeichenfolgen leider Folgendes erhalten:</p>
<img src="images/Einschraenkungsvalidierung/Chrome-multiple-error-messages.png" alt="Chrome-Anzeige einer Fehlermeldung mit verketteten Zeichenfolgen">
<p><b>Problem Nr. 2</b> : Wissen, wann die Gültigkeit eines Feldes überprüft werden muss</p>
<p>Betrachten Sie zur Veranschaulichung dieses Problems das Beispiel eines Formulars mit zwei Kennworteingabefeldern, die übereinstimmen müssen:</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;fieldset&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;legend&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">Passwort ändern </span></span><span class="tag"><span class="pln">&lt;/ legend&gt; </span></span><span class="tag"><span class="tag">&lt;ul&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;li&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;label</span><span class="pln"> </span></span><span class="atn"><span class="atn">for</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password1"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">Passwort 1: </span></span><span class="tag"><span class="pln">&lt;/ label&gt; </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password"</span><span class="pln"> </span></span><span class="atn"><span class="atn">Erforderliche</span><span class="pln"> </span></span><span class="atn"><span class="atn">ID</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password1"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ li&gt; </span></span><span class="tag"><span class="tag">&lt;li&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;label</span><span class="pln"> </span></span><span class="atn"><span class="atn">for</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password2"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">Passwort 2: </span></span><span class="tag"><span class="pln">&lt;/ label&gt; </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password"</span><span class="pln"> </span></span><span class="atn"><span class="atn">Erforderliche</span><span class="pln"> </span></span><span class="atn"><span class="atn">ID</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password2"</span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="pun"><span class="pln">= </span></span><span class="atv"><span class="pln">"submit" </span></span><span class="tag"><span class="pln">/&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln">
        </span></span><span class="tag"></span><span class="pln"></span><span class="tag"></span><span class="pln"><span class="pln">
        </span></span><span class="tag"></span><span class="pln"><span class="pln">
            </span></span><span class="tag"></span><span class="pln"><span class="pln">
                </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"></span><span class="tag"></span><span class="pln"><span class="pln">
                </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
            </span></span><span class="tag"></span><span class="pln"><span class="pln">
            </span></span><span class="tag"></span><span class="pln"><span class="pln">
                </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"></span><span class="tag"></span><span class="pln"><span class="pln">
                </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
            </span></span><span class="tag"><span class="pln"> &lt;/ Li&gt; </span></span><span class="tag"><span class="pln">&lt;/ ul&gt; </span></span><span class="tag"><span class="pln">&lt;input </span></span><span class="atn"><span class="pln">Typ</span></span><span class="pln"><span class="pln">
        </span></span><span class="tag"></span><span class="pln"><span class="pln">
        </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"><span class="pln"> submit</span><span class="pln"> &lt;/ fieldset&gt; </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln">
</span><span class="tag"></span></pre>
<p>Mein früherer Vorschlag war, das <code>change</code>Ereignis zu verwenden, um die Validierung zu implementieren, die ungefähr so ??aussieht:</p>
<pre class="prettyprint lang-js"><span class="kwd"><span class="kwd">var</span><span class="pln"> </span></span><span class="pln"><span class="pln">password1 </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="pln"><span class="typ">Dokument</span><span class="pln"> </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'password1'</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">var</span><span class="pln"> </span></span><span class="pln"><span class="pln">password2 </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="pln"><span class="typ">Dokument</span><span class="pln"> </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'password2'</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span></span><span class="pln"><span class="pln">
</span></span><span class="kwd"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
</span><span class="pln">
</span></span><span class="kwd"><span class="kwd">var</span><span class="pln"> </span></span><span class="pln"><span class="pln">checkPasswordValidity </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">function</span><span class="pln"> </span></span><span class="pun"><span class="pun">()</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">if</span><span class="pln"> </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="pln"><span class="pln">password1 </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">value </span></span><span class="pun"><span class="pun">!</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span></span><span class="pln"><span class="pln">password2 </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">value </span></span><span class="pun"><span class="pun">)</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="pln"><span class="pln">
        password1 </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">setCustomValidity </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'Passwörter müssen übereinstimmen.'</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span><span class="pln"> </span></span><span class="pun"><span class="pun">}</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">else</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="pln"><span class="pln">
        password1 </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">setCustomValidity </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">''</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"><span class="pun">}</span><span class="pln"> </span></span><span class="pun"><span class="pun">};</span></span><span class="pln"><span class="pln">        
</span></span><span class="pun"></span><span class="pln"><span class="pln">
</span><span class="pln">
</span><span class="typ">Passwort1</span><span class="pln"> </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'change'</span><span class="pln"> </span></span><span class="pun"><span class="pun">,</span><span class="pln"> </span></span><span class="pln"><span class="pln">checkPasswordValidity </span></span><span class="pun"><span class="pun">,</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">false</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span><span class="pln"> </span></span><span class="pln"><span class="pln">
</span><span class="typ">Passwort2</span><span class="pln"> </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'change'</span><span class="pln"> </span></span><span class="pun"><span class="pun">,</span><span class="pln"> </span></span><span class="pln"><span class="pln">checkPasswordValidity</span></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">false</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/8g8Nz/0/">Versuch es</a>
<p>Wenn nun der Wert eines der Kennwortfelder vom Benutzer geändert wird, wird die Gültigkeit erneut bewertet. Betrachten Sie jedoch ein Skript, das die Kennwörter automatisch ausfüllt, oder sogar ein Skript, das ein Einschränkungsattribut wie z<code>pattern</code> , <code>required</code>, <code>min</code>, <code>max</code>, oder <code>step</code>. Dies könnte die Gültigkeit der Kennwortfelder absolut beeinträchtigen, es ist jedoch kein Ereignis erkennbar, dass dies geschehen ist.</p>
<p>Fazit: Wir brauchen ein Mittel von Code ausgeführt wird, wenn ein Gültigkeitsfeld <i>könnte</i> geändert.</p>
<p><b>Problem Nr. 3</b> : Wissen, wann ein Benutzer versucht, ein Formular abzusenden</p>
<p>Warum nicht die Formulare verwenden? <code>submit</code> Ereignis für das oben beschriebene Problem verwenden? Das <code>submit</code>Ereignis wird erst ausgelöst, nachdem der Browser festgestellt hat, dass ein Formular gültige Daten enthält, wenn alle angegebenen Einschränkungen erfüllt sind. Daher gibt es keine Möglichkeit zu wissen, wann ein Benutzer versucht, ein Formular zu senden, und es wird vom Browser verhindert.</p>
<p>Es kann sehr nützlich sein zu wissen, wann ein Übermittlungsversuch stattfindet. Möglicherweise möchten Sie dem Benutzer eine Liste mit Fehlermeldungen anzeigen, den Fokus ändern oder Hilfetext anzeigen. Leider benötigen Sie eine Problemumgehung, um dies zu erreichen.</p>
<p>Eine Möglichkeit, dies zu erreichen, besteht darin, das <code>novalidate</code>Attribut dem Formular hinzuzufügen und dessen <code>submit</code>Ereignis zu verwenden. Aufgrund des <code>novalidate</code>Attributs wird die Übermittlung des Formulars unabhängig von der Gültigkeit der Daten nicht verhindert. Daher muss das Client-Skript explizit prüfen, ob das Formular in einem <code>submit</code>Ereignis gültige Daten enthält, und die Übermittlung entsprechend verhindern. Hier ist eine Erweiterung des Kennwortübereinstimmungsbeispiels, die erzwingt, dass die Überprüfungslogik ausgeführt wird, bevor das Formular gesendet wird.</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"passwordForm"</span><span class="pln"> </span></span><span class="atn"><span class="atn">novalidate</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;fieldset&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;legend&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">Passwort ändern </span></span><span class="tag"><span class="pln">&lt;/ legend&gt; </span></span><span class="tag"><span class="tag">&lt;ul&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;li&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;label</span><span class="pln"> </span></span><span class="atn"><span class="atn">for</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password1"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">Passwort 1: </span></span><span class="tag"><span class="pln">&lt;/ label&gt; </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password"</span><span class="pln"> </span></span><span class="atn"><span class="atn">Erforderliche</span><span class="pln"> </span></span><span class="atn"><span class="atn">ID</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password1"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ li&gt; </span></span><span class="tag"><span class="tag">&lt;li&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;label</span><span class="pln"> </span></span><span class="atn"><span class="atn">for</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"password2"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">Passwort 2: </span></span><span class="tag"><span class="pln">&lt;/ label&gt; </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Passwort "</span><span class="pln"> </span></span><span class="atn"><span class="atn">Erforderliche</span><span class="pln"> </span></span><span class="atn"><span class="atn">ID</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">" Passwort2 "</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln">
        </span></span><span class="tag"></span><span class="pln"></span><span class="tag"></span><span class="pln"><span class="pln">
        </span></span><span class="tag"></span><span class="pln"><span class="pln">
            </span></span><span class="tag"></span><span class="pln"><span class="pln">
                </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"></span><span class="tag"></span><span class="pln"><span class="pln">
                </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
            </span></span><span class="tag"></span><span class="pln"><span class="pln">
            </span></span><span class="tag"></span><span class="pln"><span class="pln">
                </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"></span><span class="tag"></span><span class="pln"><span class="pln">
                </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ li&gt; </span></span><span class="tag"><span class="pln">&lt;/ ul&gt; </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">" </span></span><span class="tag"><span class="atv">submit </span></span><span class="atv"><span class="atv">"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ fieldset&gt; </span></span><span class="tag"><span class="pln">&lt;/ form&gt; </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="kwd"><span class="pln">var </span></span><span class="pln"><span class="pln">password1 </span></span><span class="pun"><span class="pln">= </span></span><span class="pln"><span class="pln">document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'password1' </span></span><span class="pun"><span class="pln">); </span></span><span class="kwd"><span class="pln">var </span></span><span class="pln"><span class="pln">password2 </span></span><span class="pun"><span class="pln">= </span></span><span class="pln"><span class="pln">Dokument </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'password2' </span></span><span class="pun"><span class="pln">);</span></span><span class="pln"><span class="pln">
            </span></span><span class="tag"></span><span class="pln"><span class="pln">
        </span></span><span class="tag"></span><span class="pln"><span class="pln">
        </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="kwd"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="kwd"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
</span><span class="pln">
    </span></span><span class="kwd"><span class="pln">var </span></span><span class="pln"><span class="pln">checkPasswordValidity </span></span><span class="pun"><span class="pln">= </span></span><span class="kwd"><span class="pln">function </span></span><span class="pun"><span class="pln">() </span></span><span class="pun"><span class="pln">{ </span></span><span class="kwd"><span class="pln">if </span></span><span class="pun"><span class="pln">( </span></span><span class="pln"><span class="pln">password1 </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">value </span></span><span class="pun"><span class="pln">! = </span></span><span class="pln"><span class="pln">password2 </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">value </span></span><span class="pun"><span class="pln">) </span></span><span class="pun"><span class="pln">{ </span></span><span class="pln"><span class="pln">
            password1 </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">setCustomValidity </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'Passwörter müssen übereinstimmen.' </span></span><span class="pun"><span class="pln">); </span></span><span class="pun"><span class="pln">} </span></span><span class="kwd"><span class="pln">else </span></span><span class="pun"><span class="pln">{ </span></span><span class="pln"><span class="pln">
            password1 </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">setCustomValidity </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'' </span></span><span class="pun"><span class="pln">); </span></span><span class="pun"><span class="pln">} </span></span><span class="pun"><span class="pln">};</span></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="pun"></span><span class="pln"><span class="pln">        
    </span></span><span class="pun"></span><span class="pln"><span class="pln">
</span><span class="pln">
    Passwort1 </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'change' </span></span><span class="pun"><span class="pln">, </span></span><span class="pln"><span class="pln">checkPasswordValidity </span></span><span class="pun"><span class="pln">, </span></span><span class="kwd"><span class="pln">false </span></span><span class="pun"><span class="pln">); </span></span><span class="pln"><span class="pln">
    Passwort2 </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'change' </span></span><span class="pun"><span class="pln">, </span></span><span class="pln"><span class="pln">checkPasswordValidity </span></span><span class="pun"><span class="pln">, </span></span><span class="kwd"><span class="pln">false </span></span><span class="pun"><span class="pln">);</span></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln">
</span><span class="pln">
    </span></span><span class="kwd"><span class="pln">var </span></span><span class="pln"><span class="pln">form </span></span><span class="pun"><span class="pln">= </span></span><span class="pln"><span class="pln">document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'passwordForm' </span></span><span class="pun"><span class="pln">); </span></span><span class="pln"><span class="pln">
    bilden </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">' </span></span><span class="pln"><span class="pln">submit </span></span><span class="str"><span class="pln">' </span></span><span class="pun"><span class="pln">, </span></span><span class="kwd"><span class="pln">function </span></span><span class="pun"><span class="pln">() </span></span><span class="pun"><span class="pln">{ </span></span><span class="pln"><span class="pln">
        checkPasswordValidity </span></span><span class="pun"><span class="pln">(); </span></span><span class="kwd"><span class="pln">if </span></span><span class="pun"><span class="pln">(! </span></span><span class="kwd"><span class="pln">this </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">checkValidity </span></span><span class="pun"><span class="pln">()) </span></span><span class="pun"><span class="pln">{ </span></span><span class="pln"><span class="pln">
            event </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">preventDefault </span></span><span class="pun"><span class="pln">(); </span></span><span class="com"><span class="pln">// Implementiere eigene Mittel, um dem Benutzer hier Fehlermeldungen anzuzeigen. </span></span><span class="pln"><span class="pln">
            password1 </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">focus </span></span><span class="pun"><span class="pln">() ; </span></span><span class="pun"><span class="pln">} </span></span><span class="pun"><span class="pln">}, </span></span><span class="kwd"><span class="pln">false </span></span><span class="pun"><span class="pln">);</span></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
            </span></span><span class="com"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln">
</span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/8g8Nz/">Versuch es</a>
<p>Der Hauptnachteil dieses Ansatzes besteht darin, dass das Hinzufügen des <code>novalidate</code>Attributs zu einem Formular verhindert, dass der Browser dem Benutzer die Inline-Validierungsblase anzeigt. Wenn Sie diese Technik verwenden, müssen Sie daher Ihre eigenen Methoden implementieren, um dem Benutzer Fehlermeldungen anzuzeigen. <a href="https://jsfiddle.net/tj_vantoll/a533m/">Hier ist ein einfaches Beispiel,</a> das einen Weg zeigt, dies zu erreichen.</p>
<p>Fazit: Wir brauchen ein <code>forminvalid</code>Ereignis, das immer dann ausgelöst wird, wenn eine Formularübermittlung aufgrund ungültiger Daten verhindert wurde.</p>
<h3 id="toc-safari">Safari</h3>
<p>Obwohl Safari die API für die Gültigkeitsprüfung von Einschränkungen unterstützt, wird Safari zum jetzigen Zeitpunkt (Version 6) das Senden eines Formulars mit Problemen bei der Gültigkeitsprüfung von Einschränkungen nicht verhindern. Für den Benutzer verhält sich Safari nicht anders als ein Browser, der die Gültigkeitsprüfung von Einschränkungen überhaupt nicht unterstützt.</p>
<p>Dies lässt sich am einfachsten umgehen, indem Sie denselben Ansatz wie in der oben beschriebenen Problemumgehung verwenden, allen Formularen das <code>novalidate</code>Attribut zuweisen und das Senden von Formularen manuell verhindern <code>preventDefault</code>. Der folgende Code fügt dieses Verhalten allen Formularen hinzu.</p><p>
</p><pre class="prettyprint lang-js"><span class="kwd"><span class="kwd">var</span><span class="pln"> </span></span><span class="pln"><span class="pln">forms </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="pln"><span class="pln">document </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementsByTagName </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'form'</span><span class="pln"> </span></span><span class="pun"><span class="pun">);</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">for</span><span class="pln"> </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">var</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="lit"><span class="lit">0</span><span class="pln"> </span></span><span class="pun"><span class="pun">;</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">&lt;</span><span class="pln"> </span></span><span class="pln"><span class="typ">Formulare</span><span class="pln"> </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">L</span><span class="pun">ä</span><span class="pln">nge </span></span><span class="pun"><span class="pun">;</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">++)</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    </span><span class="typ">Formulare</span><span class="pln"> </span></span><span class="pun"><span class="pun">[</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">].</span><span class="pln"> </span></span><span class="pln"><span class="pln">noValidate </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">true</span><span class="pln"> </span></span><span class="pun"><span class="pun">;</span></span><span class="pln"><span class="pln">
</span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="kwd"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="lit"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln">
</span><span class="pln">
    bildet </span></span><span class="pun"><span class="pun">[</span><span class="pln"> </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pun">].</span><span class="pln"> </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">' </span></span><span class="pln"><span class="str">submit </span></span><span class="str"><span class="str">'</span><span class="pln"> </span></span><span class="pun"><span class="pun">,</span><span class="pln"> </span></span><span class="kwd"><span class="kwd">function</span><span class="pln"> </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="pln"><span class="pln">event </span></span><span class="pun"><span class="pun">)</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="com"><span class="com">// Übermittlung verhindern, wenn checkValidity im Formular false zurückgibt. </span></span><span class="kwd"><span class="com">if </span></span><span class="pun"><span class="com">(! </span></span><span class="pln"><span class="com">event </span></span><span class="pun"><span class="com">. </span></span><span class="pln"><span class="com">target </span></span><span class="pun"><span class="com">. </span></span><span class="pln"><span class="com">checkValidity </span></span><span class="pun"><span class="com">()) </span></span><span class="pun"><span class="com">{ </span></span><span class="pln"><span class="pln">
            event </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">preventDefault </span></span><span class="pun"><span class="pun">();</span><span class="pln"> </span></span><span class="com"><span class="com">// Implementieren Sie </span></span><span class="pln"><span class="com">Ihre </span></span><span class="com"><span class="com">eigenen </span></span><span class="pln"><span class="com">Methoden zum </span></span><span class="com"><span class="com">Anzeigen von Fehlern Nachrichten an den Benutzer hier. </span></span><span class="pun"><span class="com">} </span></span><span class="pun"><span class="com">}, </span></span><span class="kwd"><span class="com">false </span></span><span class="pun"><span class="com">); </span></span><span class="pun"><span class="com">}</span></span><span class="pln"><span class="com"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="com"> </span></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="com"></span><span class="pln"><span class="pln">
        </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
            </span></span><span class="com"></span><span class="pln"><span class="pln">
        </span></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln">
</span><span class="pun"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/rFLxt/">Versuch es</a>
<p>Hinweis: Es gibt mehrere dokumentierte Fehler, bei denen die <code>checkValidity</code>Methode falsch positive Ergebnisse zurückgibt (siehe <a href="https://bugs.webkit.org/show_bug.cgi?id=48491">hier</a> und <a href="https://github.com/aFarkas/webshim/issues/134">hier)</a> ). False Positives sind bei der obigen Problemumgehung besonders gefährlich, da der Benutzer auf einem Formular mit gültigen Daten festsitzt. Seien Sie also vorsichtig.</p>
<h3 id="toc-declarative-error-messages">Deklarative Fehlermeldungen</h3>
<p>Sie haben zwar die Möglichkeit, die Fehlermeldung eines Feldes durch Setzen des <code>validationMessage</code>Durchgangs zu ändern <code>setCustomValidity</code>, es kann jedoch lästig sein, das JavaScript-Boilerplate kontinuierlich einzurichten, um dies zu erreichen, insbesondere bei großen Formularen.</p>
<p>Um diesen Vorgang zu vereinfachen, hat Firefox ein benutzerdefiniertes <code>x-moz-errormessage</code>Attribut eingeführt, mit dem Felder automatisch festgelegt werden können <code>validationMessage</code>.
</p><pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">required</span><span class="pln"> </span></span><span class="atn"><span class="atn">x-moz-errormessage</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">" </span></span><span class="atn"><span class="atv">Bitte ausfüllen </span></span><span class="atv"><span class="atv">."</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"submit"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Submit"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln">
</span><span class="tag"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/CCZNp/">Versuch es</a>
<p>Wenn das obige Formular in Firefox gesendet wird, wird dem Benutzer anstelle der Standardnachricht des Browsers die benutzerdefinierte Nachricht angezeigt.</p>
<img src="images/Einschraenkungsvalidierung/Firefox-moz-errormessage.png" alt="Firefox-Anzeige des Attributs x-moz-errormessage">
<p>Diese Funktion wurde <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=10923">dem W3C vorgeschlagen,</a> aber abgelehnt. Daher ist Firefox derzeit der einzige Browser, in dem Sie Fehlermeldungen deklarativ angeben können.</p>
<h4>Titel Attribut</h4>
<p>Während es das nicht ändert <code>validationMessage</code>, <code>patternMismatch</code>zeigen Browser den Inhalt des <code>title</code>Attributs in der Inline-Blase an, wenn es bereitgestellt wird. ( <i>Hinweis: Chrome zeigt das <code>title</code>Attribut tatsächlich an , wenn es für einen beliebigen Fehlertyp bereitgestellt wird, nicht nur für <code>patternMismatch</code>es.</i> )</p>
<p>Wenn Sie beispielsweise versuchen, das folgende Formular einzureichen:</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;label</span><span class="pln"> </span></span><span class="atn"><span class="atn">for</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"price"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">Preis: $ </span></span><span class="tag"><span class="pln">&lt;/ label&gt; </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">pattern</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"[0-9]. [0-9] [0-9]"</span><span class="pln"> </span></span><span class="atn"><span class="atn">title</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Bitte eingeben der Preis im x.xx-Format (zB 3.99) "</span><span class="pln"> </span></span><span class="atn"><span class="atn">id</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">" price "</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">" 3 "</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">" submit "</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">" Submit "</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> 
        </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln">
        </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln">
</span><span class="tag"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/SVWXw/">Versuch es</a>
<p>Hier ist eine Auswahl der Browser, die angezeigt werden:</p>
<ul class="browser-screenshot-list wide">
<li>
Chrome 21
<img src="images/Einschraenkungsvalidierung/Chrome-title-attribute.png" alt="Chrome-Anzeige des title-Attributs">
</li>
<li>
Firefox 15
<img src="images/Einschraenkungsvalidierung/Firefox-title-attribute.png" alt="Firefox-Anzeige des title-Attributs">
</li>
<li>
Opera 12
<img src="images/Einschraenkungsvalidierung/Opera-title-attribute.png" alt="Opera-Anzeige des title-Attributs">
</li>
<li>
IE 10
<img src="images/Einschraenkungsvalidierung/IE10-title-attribute.png" alt="IE10-Anzeige des title-Attributs">
</li>
</ul>
<h3 id="toc-invalid-valid">: ungültig und: gültig</h3>
<p>Wie bereits erwähnt, stimmt die <code>:valid</code>Pseudoklasse mit Formularelementen überein, die alle angegebenen Bedingungen erfüllen, und die <code>:invalid</code>Pseudoklasse stimmt mit denjenigen überein, die diese Bedingungen nicht erfüllen . Leider werden diese Pseudoklassen unmittelbar vor dem Absenden des Formulars und vor der Interaktion mit dem Formular abgeglichen. Betrachten Sie das folgende Beispiel:
</p><pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;style&gt;</span><span class="pln"> </span></span><span class="pun"><span class="pln">: </span></span><span class="pln"><span class="pln">ungültig </span></span><span class="pun"><span class="pln">{ </span></span><span class="kwd"><span class="pln">border </span></span><span class="pun"><span class="pln">: </span></span><span class="lit"><span class="pln">1px </span></span><span class="pln"><span class="pln">solid red </span></span><span class="pun"><span class="pln">; </span></span><span class="pun"><span class="pln">} </span></span><span class="pun"><span class="pln">: </span></span><span class="pln"><span class="pln">valid </span></span><span class="pun"><span class="pln">{ </span></span><span class="kwd"><span class="pln">border </span></span><span class="pun"><span class="pln">: </span></span><span class="lit"><span class="pln">1px </span></span><span class="pln"><span class="pln">solid green </span></span><span class="pun"><span class="pln">; </span></span><span class="pun"><span class="pln">} </span></span><span class="tag"><span class="pln">&lt;/ style&gt; </span></span><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlich</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="lit"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="lit"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln">
</span><span class="tag"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/6sygE/">Versuch es</a>
<p>Ziel ist es, ungültige Felder einfach mit einem roten und gültige Felder mit einem grünen Rand zu umgeben. Dies geschieht sofort, wenn das Formular gerendert wird. Allerdings <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/">Usability - Tests von Inline - Formularvalidierung</a> haben gezeigt , dass die beste Zeit , Nutzer - Feedback zu geben , ist unmittelbar <b>nach</b> dem sie wirken mit einem Feld, nicht vor.</p>
<p>Eine Möglichkeit, dies mit dem obigen Beispiel zu erreichen, besteht darin, den Eingaben nach der Interaktion eine Klasse hinzuzufügen und die Rahmen nur dann anzuwenden, wenn die Klasse vorhanden ist.</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;style&gt;</span><span class="pln"> </span></span><span class="pun"><span class="pln">. </span></span><span class="kwd"><span class="pln">interagiert </span></span><span class="pun"><span class="pln">: </span></span><span class="pln"><span class="pln">ungültig </span></span><span class="pun"><span class="pln">{ </span></span><span class="kwd"><span class="pln">Grenze </span></span><span class="pun"><span class="pln">: </span></span><span class="lit"><span class="pln">1px </span></span><span class="pln"><span class="pln">durchgehend rot </span></span><span class="pun"><span class="pln">; </span></span><span class="pun"><span class="pln">} </span></span><span class="pun"><span class="pln">. </span></span><span class="kwd"><span class="pln">interagiert </span></span><span class="pun"><span class="pln">: </span></span><span class="pln"><span class="pln">gültig </span></span><span class="pun"><span class="pln">{ </span></span><span class="kwd"><span class="pln">border </span></span><span class="pun"><span class="pln">: </span></span><span class="lit"><span class="pln">1px </span></span><span class="pln"><span class="pln">solid green </span></span><span class="pun"><span class="pln">; </span></span><span class="pun"><span class="pln">} </span></span><span class="tag"><span class="pln">&lt;/ Style&gt; </span></span><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">Typ</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlich</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">Typ</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">Typ</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Eintragen"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt; </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="kwd"><span class="pln">var </span></span><span class="pln"><span class="pln">Eingänge </span></span><span class="pun"><span class="pln">= </span></span><span class="pln"><span class="pln">Dokument </span></span><span class="pun"><span class="pln">.</span></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="lit"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="lit"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="kwd"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln">querySelectorAll </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'input [type = text]' </span></span><span class="pun"><span class="pln">); </span></span><span class="kwd"><span class="pln">for </span></span><span class="pun"><span class="pln">( </span></span><span class="kwd"><span class="pln">var </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pln">= </span></span><span class="lit"><span class="pln">0 </span></span><span class="pun"><span class="pln">; </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pln">&lt; </span></span><span class="pln"><span class="pln">eingaben </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">länge </span></span><span class="pun"><span class="pln">; </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pln">++) </span></span><span class="pun"><span class="pln">{ </span></span><span class="pln"><span class="pln">
        eingaben </span></span><span class="pun"><span class="pln">[ </span></span><span class="pln"><span class="pln">i </span></span><span class="pun"><span class="pln">]. </span></span><span class="pln"><span class="pln">addEventListener </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'blur' </span></span><span class="pun"><span class="pln">, </span></span><span class="kwd"><span class="pln">function </span></span><span class="pun"><span class="pln">( </span></span><span class="pln"><span class="pln">event </span></span><span class="pun"><span class="pln">) </span></span><span class="pun"><span class="pln">{ </span></span><span class="pln"><span class="pln">
            event </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">target </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">classList </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">add </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'interacted' </span></span><span class="pun"><span class="pln">); </span></span><span class="pun"><span class="pln">}, </span></span><span class="kwd"><span class="pln">false </span></span><span class="pun"><span class="pln">); </span></span><span class="pun"><span class="pln">} </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="kwd"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="kwd"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="lit"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln"><span class="pln">
        </span></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="kwd"></span><span class="pun"></span><span class="pln"><span class="pln">
    </span></span><span class="pun"></span><span class="pln">
</span><span class="tag"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/WLHDY/">Versuch es</a>
<p>Firefox hat diese Probleme erkannt und <a href="http://blog.oldworld.fr/index.php?post/2011/05/Improving-HTML5-Forms-user-experience-with-moz-ui-invalid-and-moz-ui-valid-pseudo-classes">zwei zusätzliche Pseudoklassen implementiert</a> - <code>:-moz-ui-invalid</code>und <code>:-moz-ui-valid</code>. Im Gegensatz zu <code>:invalid</code>und <code>:valid</code>wird <code>:-moz-ui-invalid</code>und <code>:-moz-ui-valid</code>nicht mit einem Feld übereinstimmen, bis das Feld geändert wird oder der Benutzer versucht, das Formular mit ungültiger Eingabe zu senden.</p>
<p>Basierend auf dieser Arbeit enthält die <a href="https://www.w3.org/TR/selectors4/#user-pseudos">Spezifikation</a> der <a href="https://www.w3.org/TR/selectors4/#user-pseudos">CSS-Selektoren der Stufe 4</a> eine <code>:user-error</code>Pseudoklasse, die ähnlich funktioniert <code>:-moz-ui-invalid</code>. Es muss noch von keinem Browser implementiert werden.</p>
<p>Eine letzte Anmerkung. Beachten Sie, dass <code>:valid</code>und <code>:invalid</code>sollte <code>&lt;form&gt;</code>Knoten zusätzlich zu Formularelementen entsprechen. Derzeit wurde dies nur in Firefox implementiert. Seien Sie jedoch vorsichtig, wenn Sie globale Regeln auf <code>:valid</code>und anwenden <code>:invalid</code>.</p>
<h3 id="toc-unsupported-browsers">Nicht unterstützte Browser</h3>
<p>Die Browserunterstützung für die Gültigkeitsprüfung von Einschränkungen ist zwar recht gut, es gibt jedoch einige wichtige Player, bei denen sie nicht vorhanden sind, insbesondere IE &lt;= 9, iOS Safari und der Standard-Android-Browser.</p>
<h2 toc="toc-dealing-with-unsupported-browsers">Umgang mit nicht unterstützten Browsern</h2>
<p>Wenn Sie beabsichtigen, die neuen APIs für die Gültigkeitsprüfung von Einschränkungen in einem Produktionswebformular zu verwenden, müssen Sie <i>Maßnahmen</i> gegen nicht unterstützte Browser ergreifen. Nach meiner Erfahrung gibt es zwei Hauptoptionen:</p>
<p><b>Option 1</b> - Sich allein auf die serverseitige Validierung verlassen</p>
<p>Es ist wichtig, sich daran zu erinnern, dass auch mit diesen neuen APIs die clientseitige Validierung nicht die Notwendigkeit einer serverseitigen Validierung beseitigt. Böswillige Benutzer können problemlos clientseitige Einschränkungen umgehen, und HTTP-Anforderungen müssen nicht von einem Browser stammen.</p>
<p>Daher sollte die clientseitige Validierung immer als eine fortschreitende Verbesserung der Benutzererfahrung betrachtet werden. Alle Formulare sollten auch dann verwendbar sein, wenn keine clientseitige Validierung vorliegt.</p>
<p>Da Sie ohnehin eine serverseitige Validierung benötigen, haben Sie einen eingebauten Fallback für Browser, die keine Form der clientseitigen Validierung unterstützen, wenn Sie Ihren serverseitigen Code einfach dazu bringen, sinnvolle Fehlermeldungen zurückzugeben und sie dem Endbenutzer anzuzeigen.</p>
<p><b>Option 2</b> - Polyfill</p>
<p>Für einige Anwendungen ist es zwar sinnvoll, sich auf die serverseitige Validierung zu verlassen, für viele ist es jedoch keine Option, die Benutzerfreundlichkeitsvorteile der clientseitigen Validierung für Benutzer in nicht unterstützten Browsern zu vernachlässigen.</p>
<p>Wenn Sie Code mit den neuen APIs schreiben möchten und er überall funktionieren soll, können Sie dies am besten mit einer <a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">Polyfüllung erreichen</a> . Zusätzlich dazu, dass die APIs in nicht unterstützten Browsern funktionieren, benötigen viele Polyfills einen zusätzlichen Schritt und umgehen einige der Probleme in den nativen Implementierungen.</p>
<h2 id="toc-polyfilling">Polyfüllung</h2>
<p>Es gibt eine <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">Reihe von Polyfills</a> , die die Verwendung der API für die Gültigkeitsprüfung von Einschränkungen in jedem Browser ermöglichen. Ich werde zwei der beliebtesten verfügbaren Optionen diskutieren.</p>
<h3 id="toc-webshims">Webshims</h3>
<p><a href="https://afarkas.github.com/webshim/demos/index.html">Webshims</a> ist eine Sammlung von Polyfills, darunter eines für HTML5-Formulare und die API für die Gültigkeitsprüfung von Einschränkungen.</p>
<p>Um zu zeigen, wie Webshims verwendet wird, kehren wir zu unserem ursprünglichen Beispiel eines Formulars mit einer einzigen <code>required</code>Texteingabe zurück.</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlicher</span><span class="pln"> </span></span><span class="atn"><span class="atn">Wert</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">""</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"submit"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Submit"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln">
</span><span class="tag"></span></pre>
<p>Damit dies in allen Browsern konsistent funktioniert, müssen Sie Webshims und ihre Abhängigkeiten einbeziehen und dann aufrufen <code>$.webshims.polyfill('forms')</code>.
</p><pre class="prettyprint lang-html"><span class="com"><span class="pln">&lt;! - Abhängigkeiten von Webshims -&gt; </span></span><span class="tag"><span class="tag">&lt;script</span><span class="pln"> </span></span><span class="atn"><span class="atn">src</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"js / jquery-1.8.2.js"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> &lt;/ script&gt; </span></span><span class="tag"><span class="tag">&lt;script</span><span class="pln"> </span></span><span class="atn"><span class="atn">src</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"js / modernizr-yepnope-custom.js"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> &lt;/ script&gt;</span></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"><span class="pln">
</span><span class="pln">
</span></span><span class="com"><span class="pln">&lt;! - Webshims base -&gt; </span></span><span class="tag"><span class="tag">&lt;script</span><span class="pln"> </span></span><span class="atn"><span class="atn">src</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"js-webshim / minified / polyfiller.js"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> &lt;/ script&gt;</span></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"><span class="pln">
</span><span class="pln">
</span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">jQuery </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">Webshims </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">Polyfill </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">"Formen" </span></span><span class="pun"><span class="pln">); </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln">
</span><span class="pln">
</span></span><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlicher</span><span class="pln"> </span></span><span class="atn"><span class="atn">Wert</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">""</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"submit"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Submit"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln">
</span><span class="tag"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/YsBNt/">Versuch es</a>
<p>In unterstützten Browsern gibt es keinen Unterschied im Ergebnis. Browser, die die Einschränkungsüberprüfung nicht standardmäßig unterstützen, verhindern jetzt ungültige Formularübermittlungen und zeigen eine Fehlermeldung in einer benutzerdefinierten Sprechblase an. Zum Beispiel ist hier, was der Benutzer in Safari und IE8 sehen wird.
</p><ul class="browser-screenshot-list">
<li>
Safari 6
<img src="images/Einschraenkungsvalidierung/Webshims-Safari.png" alt="Anzeige eines ungültigen Formulars in Safari mit Webshims">
</li>
<li>
Internet Explorer 8
<img src="images/Einschraenkungsvalidierung/Webshims-IE8.png" alt="Anzeige einer ungültigen Formularübermittlung in IE8 mit Webshims">
</li>
</ul>
<p>Zusätzlich zur Polyfüllung bietet Webshims auch Lösungen für viele der Einschränkungen der Integritätsbedingungsvalidierung, die zuvor erläutert wurden.</p>
<ul>
<li>Geben Sie Fehlermeldungen deklarativ über ein <code>data-errormessage</code>Attribut an.</li>
<li>Bietet Klassen <code>form-ui-valid</code>und <code>form-ui-invalid</code>die ähnlich wie <code>:-moz-ui-valid</code>und funktionieren <code>:-moz-ui-invalid</code>.</li>
<li>Stellt benutzerdefinierte Ereignisse <code>firstinvalid</code>, <code>lastinvalid</code>, <code>changedvalid</code>, und <code>changedinvalid</code>.</li>
<li>Enthält Problemumgehungen für WebKit-Fehlalarme beim Absenden des Formulars.</li>
</ul>
<p>Weitere Informationen zu Webshims finden Sie in den <a href="https://afarkas.github.com/webshim/demos/demos/webforms.html">HTML5-Formulardokumenten</a> .</p>
<h3 id="toc-h5f">H5F</h3>
<p>H5F ist eine einfache, abhängigkeitsfreie Polyfill, die die vollständige API für die Gültigkeitsprüfung von Einschränkungen sowie eine Reihe neuer Attribute implementiert.</p>
<p>Um zu sehen, wie H5F verwendet wird, fügen wir es unserem Basisbeispiel eines Formulars mit einer einzigen <code>required</code>Texteingabe hinzu.</p>
<pre class="prettyprint lang-html"><span class="tag"><span class="tag">&lt;script</span><span class="pln"> </span></span><span class="atn"><span class="atn">src</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"H5F.js"</span><span class="pln"> </span></span><span class="tag"><span class="tag">&gt;</span><span class="pln"> &lt;/ script&gt;</span></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="tag"></span><span class="pln"><span class="pln">
</span><span class="pln">
</span></span><span class="tag"><span class="tag">&lt;form&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"text"</span><span class="pln"> </span></span><span class="atn"><span class="atn">erforderlicher</span><span class="pln"> </span></span><span class="atn"><span class="atn">Wert</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">""</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="tag">&lt;input</span><span class="pln"> </span></span><span class="atn"><span class="atn">type</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"submit"</span><span class="pln"> </span></span><span class="atn"><span class="atn">value</span><span class="pln"> </span></span><span class="pun"><span class="pun">=</span><span class="pln"> </span></span><span class="atv"><span class="atv">"Submit"</span><span class="pln"> </span></span><span class="tag"><span class="tag">/&gt;</span><span class="pln"> </span></span><span class="tag"><span class="pln">&lt;/ form&gt; </span></span><span class="tag"><span class="tag">&lt;script&gt;</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    H5F </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">setup </span></span><span class="pun"><span class="pln">( </span></span><span class="pln"><span class="pln">document </span></span><span class="pun"><span class="pln">. </span></span><span class="pln"><span class="pln">getElementsByTagName </span></span><span class="pun"><span class="pln">( </span></span><span class="str"><span class="pln">'form' </span></span><span class="pun"><span class="pln">)); </span></span><span class="tag"><span class="pln">&lt;/ script&gt;</span></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
    </span></span><span class="tag"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="atn"></span><span class="pun"></span><span class="atv"></span><span class="pln"><span class="pln"> </span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"><span class="pln">
</span></span><span class="tag"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="str"></span><span class="pun"></span><span class="pln">
</span><span class="tag"></span></pre>
<a href="https://jsfiddle.net/tj_vantoll/63YAy/">Versuch es</a>
<p>H5F verhindert die Übermittlung des Formulars in allen Browsern, der Benutzer sieht jedoch nur eine Inline-Überprüfungsblase in Browsern, die dies nativ unterstützen. Da H5F die vollständige API für die Gültigkeitsprüfung von Einschränkungen ausfüllt, können Sie damit Ihre eigene Benutzeroberfläche implementieren, um alles zu tun, was Sie möchten.</p>
<p>Wenn Sie nach Beispielen suchen, wie Sie die API nutzen können, finden <a href="http://www.alistapart.com/d/forward-thinking-form-validation/enhanced_2.html">Sie auf der Demo-Seite von H5F</a> eine Implementierung, in der die Meldungen in einer Blase rechts neben den Eingaben <a href="http://www.alistapart.com/d/forward-thinking-form-validation/enhanced_2.html">angezeigt</a> werden. Ich habe auch ein Beispiel, das zeigt, wie Sie <a href="http://tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages/">alle Fehlermeldungen in einer Liste</a> oben in Formularen anzeigen können.</p>
<p>Zusätzlich zum Polyfüllen der API für die Gültigkeitsprüfung von Einschränkungen bietet H5F auch Klassen zum Nachahmen von <code>:-moz-ui-valid</code>und <code>:-moz-ui-invalid</code>. Standardmäßig sind <code>valid</code>und <code>error</code>können diese Klassen angepasst werden, indem ein zweiter Parameter an übergeben wird <code>H5F.setup</code>.</p>
<pre class="prettyprint lang-js"><span class="pln"><span class="pln">H5F </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">setup </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="pln"><span class="pln">document </span></span><span class="pun"><span class="pun">.</span><span class="pln"> </span></span><span class="pln"><span class="pln">getElementById </span></span><span class="pun"><span class="pun">(</span><span class="pln"> </span></span><span class="str"><span class="str">'foo'</span><span class="pln"> </span></span><span class="pun"><span class="pun">),</span><span class="pln"> </span></span><span class="pun"><span class="pun">{</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    validClass </span></span><span class="pun"><span class="pun">:</span><span class="pln"> </span></span><span class="str"><span class="str">'valid'</span><span class="pln"> </span></span><span class="pun"><span class="pun">,</span><span class="pln"> </span></span><span class="pln"><span class="pln">
    invalidClass </span></span><span class="pun"><span class="pun">:</span><span class="pln"> </span></span><span class="str"><span class="str">'invalid'</span><span class="pln"> </span></span><span class="pun"><span class="pun">});</span></span><span class="pln"><span class="pln"> </span></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="str"></span><span class="pun"></span><span class="pln"></span><span class="pun"></span><span class="pln"><span class="pln"> </span></span><span class="str"></span><span class="pln">
</span><span class="pun"></span></pre>
<p>Weitere Informationen zu H5F finden <a href="https://github.com/ryanseddon/H5F">Sie auf Github</a> .</p>
<h2 id="toc-conclusion">Fazit</h2>Mit den Integritätsregel-Validierungs-APIs von HTML5 können Sie Formulare schnell clientseitig validieren und gleichzeitig eine JavaScript-API und CSS-Hooks zur Anpassung bereitstellen.<p></p>
<p>Während es noch einige Probleme mit den Implementierungen und alten Browsern gibt, können Sie diese APIs mit einer guten Polyfill oder einem guten serverseitigen Fallback heute in Ihren Formularen verwenden.</p>
</div>