Deaktivieren Sie die Validierung von HTML5-Formularelementen

418

In meinen Formularen möchte ich beispielsweise die neuen HTML5-Formulartypen verwenden <input type="url" />( weitere Informationen zu den Typen hier ).

Das Problem ist, dass Chrome super hilfreich sein und diese Elemente für mich validieren möchte, außer dass es daran scheiße ist. Wenn die integrierte Validierung fehlschlägt, gibt es keine andere Meldung oder Anzeige als das Element, das den Fokus erhält. Ich fülle URL-Elemente mit vor "http://", und meine eigene benutzerdefinierte Validierung behandelt diese Werte nur als leere Zeichenfolgen. Chrome lehnt dies jedoch ab. Wenn ich die Validierungsregeln ändern könnte, würde das auch funktionieren.

Ich weiß, dass ich einfach wieder verwenden kann, type="text"aber ich möchte die netten Verbesserungen, die diese neuen Typen bieten (z. B. wird automatisch auf ein benutzerdefiniertes Tastaturlayout auf Mobilgeräten umgeschaltet):

Gibt es also eine Möglichkeit, die automatische Validierung auszuschalten oder anzupassen?

nickf
quelle
8
Die HTML 5.1-Entwurfsspezifikation erwähnt ein inputmodeAttribut , das - wenn ich verstehe, was ich richtig lese - verwendet werden kann, um anzugeben, welcher Tastaturtyp dem Benutzer angeboten werden soll, wenn er mit dem Feld interagiert, ohne auch Validierungsregeln zu implizieren. Irgendwann in der Zukunft wird die Verwendung des inputmodeAttributs anstelle des typeAttributs wahrscheinlich die richtige Lösung für dieses Problem sein - aber noch nicht.
Mark Amery
@ MarkAmery Obwohl es nicht allzu schwer wäre, jetzt die Zukunft zu bekommen:$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });
Marnen Laibow-Koser
1
@ MarnenLaibow-Koser Während das, was Sie beschrieben haben, funktioniert, wenn Sie nur die Validierung deaktivieren möchten (wie vom Fragesteller angegeben), erzielt es nicht ganz das gleiche Ergebnis wie es inputmodewäre. Wenn Sie die Dinge auf Ihre Weise tun, können Sie (zum Beispiel) immer noch keine nicht numerischen Werte lesen, die der Benutzer in ein Eingabefeld vom Typ eingibt number. Versuchen Sie beispielsweise, etwas Nicht-Numerisches in das Textfeld dieser Geige einzugeben und auf die Schaltfläche zu klicken.
Mark Amery
@ MarkAmery Interessant. Liegt das daran <input type='number'>, dass nicht numerische Werte überhaupt nicht akzeptiert werden?
Marnen Laibow-Koser
@ MarnenLaibow-Koser Ich denke schon. Die akzeptierte Antwort auf diese Frage zum Problem enthält einen Link zu der Spezifikation, die der Antwortende für dieses Verhalten beansprucht.
Mark Amery

Antworten:

752

Wenn Sie die clientseitige Validierung für ein Formular in HTML5 deaktivieren möchten, fügen Sie dem Formularelement ein novalidate-Attribut hinzu. Ex:

<form method="post" action="/foo" novalidate>...</form>

Siehe https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Jakob S.
quelle
83
novalidate="novalidate"und novalidate=""ist auch eine gültige Syntax.
Bassim
9
@bassim Gültige Syntax, aber zu ausführlich - warum mehr eingeben, als Sie benötigen?
Benutzer1569050
11
@ user1569050 Beispielsweise wird in Frameworks wie CakePHP die novalidate="novalidate"Methode verwendet, wenn Sie die novalidate => trueim $optionsArray von festlegen FormHelper::create(). Danke Bassim für die zusätzlichen Infos :)
Jelmer
12
@ rybo111 Dies ist eine clientseitige Validierung, mit der die Anzahl der Anforderungen an den Server verringert werden kann. Es ist keine Entschuldigung, die Validierung auf der Serverseite zu vereinfachen.
Martti
11
@martti Ich bezog mich auf die Tatsache, dass ich beim Testen einer neuen PHP-Validierung die JavaScript-Validierung für dieses eine Formular schnell deaktivieren kann, um zu vermeiden, dass das gesamte Formular korrekt ausgefüllt werden muss. Ich hätte schreiben sollen "einfacher zu testen".
Rybo111
31

Ich habe die Spezifikation gelesen und einige Tests in Chrome durchgeführt. Wenn Sie das "ungültige" Ereignis abfangen und false zurückgeben, scheint dies das Senden von Formularen zu ermöglichen.

Ich benutze jquery mit diesem HTML.

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

Ich habe dies in keinem anderen Browser getestet.

Ben Boyle
quelle
Ausgezeichnet - ich werde es morgen ausprobieren und Sie wissen lassen, wie es geht. Vielen Dank.
Nickf
Beeindruckend! Es fiel mir wirklich schwer zu sehen, wo mein Submit-Event war. Danke mein Herr!
Zigeunerkönig
2
FireFox überprüft bei Änderung der Eingabe. Dann wird das 'ungültige' Ereignis nicht ausgelöst. Also keine Lösung für mich.
Niels Steenbeek
7
morgen kommt nie :)
Lucky Soni
4
Funktioniert nicht Ich habe den Code zu einem Ausschnitt gemacht. Wenn Sie das invalidEreignis abfangen und false zurückgeben, wird das Formular nicht gesendet.
Dan Dascalescu
23

Ich wollte nur hinzufügen, dass die Verwendung des Attributs novalidate in Ihrem Formular den Browser nur daran hindert, das Formular zu senden. Der Browser wertet die Daten weiterhin aus und fügt die Pseudoklassen: valid und: invalid hinzu.

Ich habe dies herausgefunden, weil die gültigen und ungültigen Pseudoklassen Teil des von mir verwendeten HTML5-Boilerplate-Stylesheets sind. Ich habe gerade die Einträge in der CSS-Datei entfernt, die sich auf die Pseudoklassen beziehen. Wenn jemand eine andere Lösung findet, lass es mich wissen.

BFTrick
quelle
Wie hießen die Einträge?
tm_forthefuture
1
Haha - es tut mir nicht mehr leid. Das war jetzt vor 3 Jahren. :(
BFTrick
1
Du meinst : <form action="" method="" class="" id="" novalidate>;)
Muhammad Shahzad
15

Die beste Lösung besteht darin, eine Texteingabe zu verwenden und das Attribut inputmode = "url" hinzuzufügen, um die URL-Tastaturfunktionen bereitzustellen. Zu diesem Zweck wurde die HTML5-Spezifikation entwickelt. Wenn Sie type = "url" beibehalten, erhalten Sie die Syntaxüberprüfung, die nicht in jedem Fall nützlich ist (es ist besser zu überprüfen, ob ein 404-Fehler zurückgegeben wird, als die Syntax, die recht zulässig ist und keine große Hilfe darstellt).

Sie haben auch die Möglichkeit, das Standardmuster mit dem Attribut pattern = "https ?: //.+" zu überschreiben, um beispielsweise freizügiger zu sein.

Das Einfügen des Attributs novalidate in das Formular ist nicht die richtige Antwort auf die gestellte Frage, da dadurch die Validierung für alle Felder im Formular entfernt wird und Sie möglicherweise die Validierung für E-Mail-Felder beibehalten möchten.

Die Verwendung von jQuery zum Deaktivieren der Validierung ist ebenfalls eine schlechte Lösung, da es unbedingt ohne JavaScript funktionieren sollte.

In meinem Fall habe ich vor der URL-Eingabe ein Auswahlelement mit zwei Optionen (http: // oder https: //) eingefügt, da ich nur Websites (und kein FTP: // oder andere Dinge) benötige. Auf diese Weise vermeide ich die Eingabe dieses seltsamen Präfixes (das größte Bedauern von Tim Berners-Lee und möglicherweise die Hauptursache für URL-Syntaxfehler) und verwende eine einfache Texteingabe mit inputmode = "url" mit Platzhaltern (ohne HTTP). Ich verwende jQuery und ein serverseitiges Skript, um die tatsächliche Existenz der Website (Nr. 404) zu überprüfen und das HTTP-Präfix zu entfernen, wenn es eingefügt wird (ich vermeide es, ein Muster wie pattern = "^ ((? Htt).) * $" Zu verwenden. um zu verhindern, dass das Präfix gesetzt wird, weil ich denke, dass es besser ist, freizügiger zu sein)

Plancton
quelle
13

Anstatt zu versuchen, die Validierung des Browsers zu beenden, können Sie den http://Text als Platzhalter einfügen. Dies ist von der Seite, die Sie verlinkt haben:

Platzhaltertext

Die erste Verbesserung, die HTML5 für Webformulare bringt, ist die Möglichkeit, Platzhaltertext in einem Eingabefeld festzulegen . Platzhaltertext wird im Eingabefeld angezeigt, solange das Feld leer und nicht fokussiert ist. Sobald Sie auf das Eingabefeld klicken (oder darauf klicken), verschwindet der Platzhaltertext.

Sie haben wahrscheinlich schon einmal Platzhaltertext gesehen. Zum Beispiel enthält Mozilla Firefox 3.5 jetzt Platzhaltertext in der Positionsleiste mit der Aufschrift "Lesezeichen und Verlauf durchsuchen":

Geben Sie hier die Bildbeschreibung ein

Wenn Sie auf die Positionsleiste klicken (oder auf diese klicken), verschwindet der Platzhaltertext:

Geben Sie hier die Bildbeschreibung ein

Ironischerweise unterstützt Firefox 3.5 das Hinzufügen von Platzhaltertext zu Ihren eigenen Webformularen nicht. So ist das Leben.

Platzhalterunterstützung

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

So können Sie Platzhaltertext in Ihre eigenen Webformulare aufnehmen:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Browser, die das placeholderAttribut nicht unterstützen, ignorieren es einfach. Kein Schaden, kein Foul. Überprüfen Sie, ob Ihr Browser Platzhaltertext unterstützt .

Es wäre nicht genau das gleiche, da es dem Benutzer nicht diesen "Ausgangspunkt" bieten würde, aber es ist zumindest auf halber Strecke.

John Kugelman
quelle
5
+1 für den Tipp, aber für mich ist das leider keine Lösung. Ich möchte immer noch keine Validierung durchführen, hauptsächlich weil die UX dafür so schlecht ist.
Nickf
10

Ich habe in diesem folgenden Selektor eine Lösung für Chrome mit CSS gefunden, ohne das native Überprüfungsformular zu umgehen, was sehr nützlich sein könnte.

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

Auf diese Weise können Sie auch Ihre Nachricht anpassen ...

Ich habe die Lösung auf dieser Seite: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Val Entin
quelle
1
Dies funktioniert nicht in der neuesten Version von Chrome (29), ich frage mich, ob es wegen Blink
Blowsie
5

Verwenden Sie einfach novalidate in Ihrem Formular.

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

Prost!!!

brainSquezer
quelle
1
Was ist mit dem Deaktivieren der Validierung für ein einzelnes Eingabe-Tag?
Tobias Kolb
0

Hier ist die Funktion, die ich verwende, um zu verhindern, dass Chrome und Opera den ungültigen Eingabedialog anzeigen, selbst wenn novalidate verwendet wird.

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});
Tony Brix
quelle
0

Sie können Javascript hinzufügen, um diese abscheulichen Validierungsblasen zu unterdrücken, und Ihre eigenen Validatoren hinzufügen.

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);
Tobias Kolb
quelle
0

Wenn Sie ein Formular - Element markieren , wie required=""dann novalidate=""nicht hilft.

Eine Möglichkeit, die requiredValidierung zu umgehen, besteht darin , das Element zu deaktivieren .

cweiske
quelle
-5

Sie können eine einfache Chrome-Erweiterung installieren und die Validierung im laufenden Betrieb deaktivieren Https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

Standardmäßig funktioniert alles als Standard, aber Sie können die HTML5-Validierung mit einem einzigen Klick auf das Erweiterungssymbol in der Symbolleiste deaktivieren

Andrew Zhilin
quelle
Sie sind sich nicht sicher, warum viele Leute diese Lösung nicht mögen. Sie ermöglicht es, die Servervalidierung für HTML5-Formulare zu testen, ohne den tatsächlichen HTML-Code zu
beeinträchtigen
3
Ich glaube, es wird nicht gemocht, weil sich die Frage darauf konzentriert , ein HTML5-Formular zu erstellen und die automatische Validierung für alle Benutzer zu deaktivieren. Es ist keine dauerhafte Lösung, alle Benutzer zu bitten, A) Chrome zu verwenden und B) eine Erweiterung zu installieren, bevor Sie Ihre Site verwenden.
Kallmanation