it-swarm.com.de

Wie man den Standardwert "Bitte dieses Feld ausfüllen" in zwei Feldern ändern

Ich möchte zwei verschiedene Nachrichten in zwei Feldern haben, z. B. das Feld "Benutzername" und "Kennwort", das Meldungen wie "Benutzername nicht leer" und "Kennwort nicht leer" enthält. Ich habe es nur geschafft, die Nachricht zu ändern, aber sie ist dann für beide Felder gleich. Es ist hier

$(document).ready(function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
    elements[i].oninvalid = function(e) {
        e.target.setCustomValidity("");
        if (!e.target.validity.valid) {
            e.target.setCustomValidity("Username cannot be blank");
        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
} })
12
Godfather

entschuldigung, einige Fehler in meinem Code. Probieren Sie das aus, das funktioniert für mich:

$(document).ready(function() {
var msg="";
var elements = document.getElementsByTagName("INPUT");

for (var i = 0; i < elements.length; i++) {
   elements[i].oninvalid =function(e) {
        if (!e.target.validity.valid) {
        switch(e.target.id){
            case 'password' : 
            e.target.setCustomValidity("Bad password");break;
            case 'username' : 
            e.target.setCustomValidity("Username cannot be blank");break;
        default : e.target.setCustomValidity("");break;

        }
       }
    };
   elements[i].oninput = function(e) {
        e.target.setCustomValidity(msg);
    };
} 
})
14
scraaappy

Sie können diesen Code verwenden.

 <input type = "text" required = "" name = "username" placeholder = "Benutzername" oninvalid = "this.setCustomValidity ('Benutzername darf nicht leer sein')"> 
 <Eingabetyp = "password" required = "" name = "password" Platzhalter = "Passwort" oninvalid = "this.setCustomValidity ('Passwort darf nicht leer sein')"> 
3
Obaidul Haque

Sie können sowohl Ihrem Benutzernamen als auch Ihrem Kennwort ein id-Attribut hinzufügen: input-Elemente:

<input placeholder="Username" required id="username" />
<input type="password" placeholder="Password" required id="password" />

Dann können Sie eine switch-Anweisung verwenden, um die benutzerdefinierte Überprüfungsnachricht entsprechend dem Ziel des Ereignisses hinzuzufügen:

$(document).ready(function () {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                switch (e.srcElement.id) {
                    case "username":
                        e.target.setCustomValidity("Username cannot be blank");
                        break;
                    case "password":
                        e.target.setCustomValidity("Password cannot be blank");
                        break;
                }
            }
        };
        elements[i].oninput = function (e) {
            e.target.setCustomValidity("");
        };
    }
})

Hier ist eine Demo.

3
Alex Filipovici

sie machen eine Schleife für alle Ihre Eingabeelemente. Deshalb erhalten Sie in jedem Element das gleiche Ergebnis. Geben Sie Ihrer Eingabe eine ID, z. B. Benutzername und Kennwort, und versuchen Sie dann Folgendes:

$(document).ready(function() {
var msg="";
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
    elements[i].oninvalid = function(e) {
        e.target.setCustomValidity("");

        switch(e.target.id){
            case "password" :
            msg="Bad password";
            case "username" :
            msg="Username cannot be blank";
        }

        if (!e.target.validity.valid) {
            e.target.setCustomValidity(msg);
        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
} })
0
scraaappy