Deaktivieren Sie die Validierung von HTML5-Formularelementen

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?

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

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.

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.

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)

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":

Wenn Sie auf die Positionsleiste klicken (oder auf diese klicken), 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 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.

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

Verwenden Sie einfach novalidate in Ihrem Formular.

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

Prost!!!

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;
});

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);

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 .

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