überschreiben Standardbrowser Formularvalidierung

Question

Angenommen, Sie einen Eingang für E-Mail wie folgt aussehen:

<input type='email' placeholder='Email:' required /> 

In Chrome und anderen modernen Browsern Typ festgelegt zu haben, um E-Mail-Validierung ermöglicht nur, dh wie „etwas @ etwas“ E-Mail wird gültig sein . Es zeigt Standard-Popup-Meldung wie folgt aus:

Ich frage mich, ob es möglich ist, in diese Ereignisse zu erschließen, um sie für eine benutzerdefinierte Validierung zu benutzen? Und deaktivieren Sie Standard-Browser.

<!-- This validates as normal --> 
 
<form method="post" action="#"> 
 
    <input type="email" placeholder="Validate Email:" required /> 
 
    <input type="submit"> 
 
</form> 
 

 
<!-- This adds the `novalidate` flag --> 
 
<form method="post" action="#" novalidate> 
 
    <input type="email" placeholder="Novalidate Email:" required /> 
 
    <input type="submit"> 
 
</form>

Dies ermöglicht es Ihnen noch HTML-Eingabetypen verwenden (zB ":

Answer 1

Zuerst müssen Sie die Standard-Browser-Validierung deaktivieren. Um dies zu tun, nur novalidate hinzufügen Element zu bilden:

<form class="custom-validated-form" novalidate > 
    <input type='email' placeholder='Email:' required /> 
</form> 

Um einige benutzerdefinierte Validierung tun müssen, um Sie den einreichen Ereignis fangen und tun .preventDefault() bei Ihrer benutzerdefinierten Validierung fehlgeschlagen:

$('.custom-validated-form').submit(function(event) { 

    // your custom validation 

    event.preventDefault() 
}) 

Gute Idee könnte Verwenden Sie eine Bibliothek von Drittanbietern wie peersery.js, um die Validierung für Sie zu übernehmen.

Answer 2

Sie können durch Hinzufügen der novalidate Flagge zu Ihrem form Tag clientseitige HTML5-Browser Validierung deaktivieren E-Mail ") und verhindern, dass der Browser Validierungen durchführt.

Von diesem Punkt an wären Sie offen für die Implementierung Ihrer eigenen Lösung oder die Integration eines von vielen Validierungs-Plugins von Drittanbietern (wie jQuery Validation).

---

Außerdem, wenn Sie die HTML5 Validierung halten möchten, aber die Validierungsnachricht ändern, können Sie setCustomValidity verwenden - Es kann einige Browser Schwierigkeiten bereiten, aber es ist eine praktikable Option nicht weniger.