Deaktivieren Sie die Validierung von HTML-Formularelementen

In meinen Formularen möchte ich zum Beispiel die neuen HTML-Formulartypen verwenden <input type="url" /> (mehr Infos zu den Typen hier).

Das Problem ist, dass Chrome super hilfreich sein und diese Elemente für mich validieren will, außer dass es 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ß, ich könnte einfach wieder zum Konsum zurückkehren type="text" aber ich möchte die netten Verbesserungen, die diese neuen Typen bieten (z. B.: es wechselt automatisch zu einem benutzerdefinierten Tastaturlayout auf mobilen Geräten):

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

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

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

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

Ich habe die Spezifikation gelesen und einige Tests in Chrome durchgeführt. Wenn Sie das Ereignis “ungültig” abfangen und “false” zurückgeben, scheint dies die Formularübermittlung zu ermöglichen.

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

In anderen Browsern habe ich das nicht getestet.

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 trotzdem aus und fügt die Pseudoklassen :valid und :invalid hinzu.

Ich habe das 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. Falls jemand eine andere Lösung findet bitte melden.

Die beste Lösung besteht darin, eine Texteingabe zu verwenden und das Attribut inputmode=”url” hinzuzufügen, um die URL-Tastaturfunktionen bereitzustellen. Dafür wurde die HTML5-Spezifikation gedacht. Wenn Sie type=”url” beibehalten, erhalten Sie die Syntaxvalidierung, die nicht in jedem Fall nützlich ist (es ist besser zu prüfen, ob sie einen 404-Fehler zurückgibt, anstatt der Syntax, die recht freizügig ist und keine große Hilfe ist).

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 novalidate-Attributs in das Formular ist nicht die richtige Antwort auf die gestellte Frage, da es die Validierung für alle Felder im Formular entfernt und Sie die Validierung beispielsweise 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, weil ich nur Webseiten benötige (und kein ftp:// oder ähnliches). Auf diese Weise vermeide ich dieses seltsame Präfix (das größte Bedauern von Tim Berners-Lee und vielleicht die Hauptquelle 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 zu überprüfen (kein 404) und um das HTTP-Präfix zu entfernen, falls es eingefügt wird (ich vermeide es, ein Muster wie pattern=”^((?http).)*$” zu verwenden. um zu verhindern, dass das Präfix gesetzt wird, weil ich denke, dass es besser ist, freizügiger zu sein)

Anstatt zu versuchen, die Validierung des Browsers zu umgehen, könnten Sie die http:// als Platzhaltertext ein. Dies ist von der Seite, die Sie verlinkt haben:

Platzhaltertext

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

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

Wenn Sie auf die Adressleiste klicken (oder mit der Tabulatortaste dorthin navigieren), verschwindet der Platzhaltertext:

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 einfügen:

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

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

Es wäre nicht genau das Gleiche, da es diesen “Ausgangspunkt” für den Benutzer nicht bieten würde, aber es ist zumindest der halbe Weg dorthin.

Ich habe eine Lösung für Chrome mit CSS im folgenden Selektor gefunden, ohne das native Bestätigungsformular 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 Ihre Nachricht auch individuell gestalten…

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

Sie können etwas Javascript hinzufügen, um diese widerlichen 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);