Jak zmienić domyślne "proszę wypełnić to pole" w dwóch polach

Question

Chciałbym dwie różne wiadomości w dwóch polach, na przykład, nazwa użytkownika i hasło, które zawierają wiadomości typu "nazwa użytkownika nie może być pusta" i "hasło nie może być pusty". Udało mi się tylko zmienić wiadomość, ale jest ona taka sama dla obu pól. To 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

Przepraszam, niektóre błędy w moim kodzie. Wypróbuj to, co działa:

$(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

zrobić pętlę na wszystkich elementów wejściowych, dlatego można uzyskać ten sam rezultat w każdym elemencie. Podać identyfikator do swojego wejścia na przykład nazwę użytkownika i hasło, a następnie spróbuj:

$(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

Możesz dodać atrybut id zarówno nazwy użytkownika i hasła input elementy:

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

Następnie można użyć switch oświadczenie dodać niestandardowy komunikat walidacji zgodnie z celem imprezy:

$(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

Możesz użyć tego kodu.

 
    <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')">