it-swarm.com.de

Deaktivieren Sie die Validierung von HTML5-Formularelementen

In meinen Formularen möchte ich die neuen HTML5-Formulartypen verwenden, zum Beispiel <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 "http://" vor, und so behandelt meine eigene benutzerdefinierte Validierung diese Werte nur als leere Zeichenfolgen, Chrome lehnt dies jedoch ab. Wenn ich seine Validierungsregeln ändern könnte, würde das auch funktionieren.

Ich weiß, dass ich einfach auf die Verwendung von type="text" zurückgreifen könnte, aber ich möchte, dass die Verbesserungen in Nizza mithilfe dieser neuen Typen angeboten werden (z. B .: Es wird automatisch auf ein benutzerdefiniertes Tastaturlayout auf Mobilgeräten umgeschaltet):

Also, gibt es eine Möglichkeit, die automatische Validierung auszuschalten oder anzupassen?

404
nickf

Wenn Sie die clientseitige Überprüfung 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

718
Jakob S

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 die Übermittlung 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.

32
Ben Boyle

Ich wollte nur hinzufügen, dass die Verwendung des Attributs novalidate in Ihrem Formular nur verhindert, dass der Browser das Formular sendet. 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 HTML5-Boilerplate-Stylesheets sind, das ich verwendet habe. 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.

21
BFTrick

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

Platzhaltertext

Die erste Verbesserung, die HTML5 für Webformulare bringt, ist das Setzen von Platzhaltertext in einem Eingabefeld . Platzhaltertext wird im Eingabefeld angezeigt, solange das Feld leer und nicht fokussiert ist. Sobald Sie auf das Eingabefeld klicken, verschwindet der Platzhaltertext.

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

enter image description here

Wenn Sie auf die Adressleiste klicken (oder einen Tabulator anklicken), verschwindet der Platzhaltertext:

enter image description here

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

Platzhalter-Unterstützung

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

So können Sie Platzhaltertext in Ihre eigenen Webformulare einfügen:

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

Browser, die das placeholder -Attribut 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 den "Startpunkt" bieten würde, aber zumindest auf halbem Weg.

14
John Kugelman

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, anstatt der Syntax, die recht tolerant ist und keine große Hilfe darstellt).

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

Das Setzen des novalidate-Attributs in das Formular ist nicht die richtige Antwort auf die gestellte Frage, da dadurch die Validierung für alle Felder im Formular aufgehoben 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 setze ich ein select-Element mit 2 Optionen (http: // oder https: //) vor die URL-Eingabe, da ich nur Websites benötige (und keine ftp: // oder andere Dinge). Auf diese Weise vermeide ich die Eingabe dieses seltsamen Präfixes (das größte Bedauern von Tim Berners-Lee und möglicherweise die Hauptquelle für URL-Syntaxfehler) und verwende eine einfache Texteingabe mit inputmode = "url" mit Platzhaltern (ohne HTTP). Ich verwende jQuery und serverseitiges Skript, um die tatsächliche Existenz der Website zu überprüfen (Nr. 404) und das HTTP-Präfix zu entfernen, falls es eingefügt wird (ich vermeide die Verwendung eines Musters wie pattern = "^ ((? Http).) * $" um das Setzen des Präfixes zu verhindern, weil ich es für besser halte, freizügiger zu sein)

13
plancton

Ich habe eine Lösung für Chrome mit CSS für diesen folgenden Selektor gefunden, ohne das native Bestätigungsformular zu umgehen, das sehr nützlich sein kann.

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 bekomme die Lösung auf dieser Seite: http://trac.webkit.org/wiki/Styling%20Form%20Controls

9
Val Entin

Verwenden Sie einfach novalidate in Ihrem Formular.

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

Prost!!!

5
brainSquezer

Mit dieser Funktion kann ich verhindern, dass chrome und opera den ungültigen Eingabedialog auch bei Verwendung von novalidate anzeigen.

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;
});
0
Tony Brix