Ciao a tutti....
Volevo avere un aiuto sulla validazione di un form tramite l'evento blur.
Praticamente funziona correttamente e nel momento in cui io esco dal campo mi controla effettivamente che ho sbagliato .
vi spiego meglio :
campo 1 --> non commetto errori --> esco dal campo --> non mi segnala nulla;
campo 2 --> non commetto errori --> esco dal campo --> non mi segnala nulla;
campo 1 --> commetto errori --> esco dal campo --> mi segnala che ho sbagliato ;
campo 2 --> commetto errori --> esco dal campo --> mi segnala che ho sbagliato ;
e fin qui tutto a posto.
Pero se ripeto la procedura :
campo 1 --> commetto errori --> esco dal campo --> mi segnala che ho sbagliato mettendo in coda l' errore precedente
campo 2 --> commetto errori --> esco dal campo --> mi segnala che ho sbagliato mettendo in coda l' errore precedente
come faccio a dirle che se c'e gia l 'errore di non aggiungerlo in coda. Sto utilizzando la sintassi con remove child e append child e ho un po di confusion .. vi posto il codice :
HTML
JAVASCRIPTcodice:<html> <head> </head> <body> <div id="container"> <div class="campi"> <label>Nome:</label> <input type="text" id="nome"/> </div> <div class="campi"> <label>Cognome:</label> <input type="text" id="cognome"/> </div> </div> <button>Invia</button> </body> <script type="text/javascript" src="script.js"></script> </html>
codice:var nome = document.getElementById("nome"); var cognome = document.getElementById("cognome"); nome.addEventListener("blur", controllaCampo); cognome.addEventListener("blur", controllaCampo); var errMsg = true; function controllaCampo(e){ //if(errMsg) errMsg.removeChild(errMsg.lastChild); var subject = e.target; //visualizzo l'errore solo se la unghezza è uguale a 0 if(subject.value.length === 0){ visualizzaErrore(); errMsg = false; } else{ errMsg = true; //parentNode corrisponde all'elemento padre el = subject.parentNode.getElementsByClassName('errore')[0]; //vuol dire se el esiste if(el){ subject.parentNode.removeChild(el); } } function visualizzaErrore(){ //creo lo span var error = document.createElement("span"); //creo una classe a span class = errore error.setAttribute("class", "errore"); // <span>testo + id</span> error.innerHTML = "Hai sbagliato il campo " + subject.id; subject.parentNode.appendChild(error); } }
Rispondi quotando
all torvero un altra soluzione grazie
