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
codice:
<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>
JAVASCRIPT
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);
        }
             
}