So ändern Sie Standard "Bitte füllen Sie dieses Feld" in zwei Feld

Question

Ich möchte zwei verschiedene Nachrichten in zwei Feld, zum Beispiel das Feld Benutzername und Passwort, die Nachrichten wie "Benutzername kann nicht leer sein" und "Passwort kann nicht sein leer". Ich habe es nur geschafft, die Nachricht zu ändern, aber es ist dann das gleiche für beide Felder. Es ist here

$(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(""); 
    }; 
} }) 

Answer 1

Entschuldigung, einige Fehler in meinem Code. Versuchen Sie das, 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); 
    }; 
} 
}) 

Answer 2

Sie eine Schleife über alle Eingabeelemente machen das ist, warum Sie das gleiche Ergebnis in jedem Element erhalten. Geben Sie ein ID auf Ihre Eingabe zum Beispiel Benutzernamen und Passwort, dann versuchen:

$(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(""); 
    }; 
} }) 

Answer 3

Sie können ein id Attribut sowohl Ihren Benutzernamen und Passwort input Elemente hinzufügen:

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

Dann können Sie eine switch verwenden Anweisung der benutzerdefinierten Validierungsnachricht hinzuzufügen entsprechend dem Ziel der Veranstaltung:

$(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(""); 
     }; 
    } 
}) 

Here ‚sa Demo.

Answer 4

Sie können diesen Code verwenden.

 
    <input type="text" required="" name="username" placeholder="Username" oninvalid="this.setCustomValidity('Username cannot be blank')"> 
    <input type="password" required="" name="password" placeholder="Password" oninvalid="this.setCustomValidity('Password cannot be blank')">