Wie ändere ich die Standardnachricht des erforderlichen Feldes im Popover der Formularsteuerung in Bootstrap?

74 
 <form class="form-asd" role="form">
    <h2 class="form-signin-heading">login</h2><hr />
    <label class="control-label"  for="username">Username</label>
    <input class="form-control" type="email"  required="" placeholder="username"data-error="enter valid username"></input>
    <label class="control-label"  for="username">password</label>
    <input class="form-control" type="password"  required=" " placeholder="Password"></input>
    <label class="checkbox"></label>
    <button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>

Wie können wir diese Standard-Popover-Meldung des Anforderungsfelds "Bitte füllen Sie dieses Feld aus" in "Bitte geben Sie den Benutzernamen ein" ändern?

html css twitter-bootstrap dpndra
quelle
Dieser Codepen macht genau das.
Zelusp
Siehe auch Ändern der Sprache der Fehlermeldung im erforderlichen Feld im HTML5-Kontaktformular , nahezu identische Frage. Der einzige wirkliche Unterschied besteht darin, dass in dieser Frage Bootstrap erwähnt wird.
Faintsignal

Antworten:

190

Sie können die setCustomValidityFunktion verwenden, wenn ein oninvalidEreignis auftritt.

Wie unten:-

<input class="form-control" type="email" required="" 
    placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>

Aktualisieren:-

Um die Nachricht zu löschen, sobald Sie mit der Eingabe beginnen, verwenden Sie das oninput="setCustomValidity('')Attribut, um die Nachricht zu löschen.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>
Mritunjay
quelle
8
Am besten hier erklärt: html5rocks.com/de/tutorials/forms/constraintvalidation
David Costa
17
Nachdem ich diesen Code hinzugefügt habe, wird meine Nachricht angezeigt, aber nachdem ich einen Text in die Eingabe eingegeben habe, wird diese Nachricht immer noch angezeigt, bis ich sie aktualisiere.
Pera
11
Um diese Methode verwenden zu können, müssen Sie die customValidity-Nachricht nach der Eingabe löschen. Andernfalls wird diese Fehlermeldung auch dann angezeigt, wenn sie gültig ist. oninput = "setCustomValidity ('')" behebt dieses Problem, wenn es mit oninvalid verwendet wird.
Bartu
1
Gibt es eine Möglichkeit, zwischen einem Benutzer, der ein Feld leer lässt, und einem Benutzer, der eine ungültige E-Mail eingibt, zu unterscheiden? Kann ich sowohl die erforderliche Fehlermeldung als auch die ungültige E-Mail-Fehlermeldung bearbeiten?
Ariebear
Kann dies für alle Eingaben nicht nur auf einigen Seiten durchgeführt werden?
Youssef Boudaya
21

Die Kombination der Antworten von Mritunjay und Bartu ist die vollständige Antwort auf diese Frage. Ich kopiere das vollständige Beispiel.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

Hier,

this.setCustomValidity ('Bitte geben Sie eine gültige E-Mail-Adresse ein') " - Zeigt die benutzerdefinierte Nachricht an, wenn das Feld ungültig ist

oninput = "setCustomValidity ('')" - Entfernen Sie die ungültige Nachricht in der validierten Datei .

Sairam Kukadala
quelle
5

Und für alle Eingaben und wählen Sie:

$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
Stepan Tripal
quelle
-2

$ ("input [required]"). attr ("oninvalid", "this.setCustomValidity ('Say Somthing!')");

Dies funktioniert, wenn Sie mit der Maus zum vorherigen oder nächsten Feld wechseln, aber mit der Eingabetaste, dies funktioniert nicht !!!

APH
quelle