Controllo form tramite javascript

[AtoXx]

Salve a tutti, era da un pò che non scrivevo in javascript e ricordavo già le stranezze che mi accadevano .

Comunque al momento sto provando a fare il controllo dei dati inseriti in un form (esempio classico).
Nello specifico sto cercando di rilevare i campi lasciati vuoti dall'utente.

Ogni elemento da compilare obbligatoriamente è stato contrassegnato dalla classe "req".
Quindi lato javascript ho eseguito una chiamata alla funzione

var arr = document.getElementsByClassName("req");

Già qui ho stranezze!Gli elementi obbligatori sono 11 ma a volte me ne conta meno, come cavolo è possibile?

Comunque poi ciclo tutto l'array "arr" in base alla sua lunghezza (nel mio caso sono 11 gli elementi obbligatori) e nel caso andassi a trovare elementi vuoti aggiungevo una classe così da farlo capire all'utente.
Mentre scorro l'array noto che nell'array sembra che non ci siano tutti gli elementi con la classe "req", infatti non ottengo gli elementi di input "cognome", "città", "civico" e "nome utente". Perchè?
La lunghezza dell'array è di 11 elementi ma il ciclo for lo fa solo 6 volte!
Il codice è una cavolata ma intanto non funziona

Sto già impazzendo e maledicendo javascript

Vi allego i file php e js. Posto il codice javascript

window.onload=function(){
    if(!document.getElementById || !document.createElement){
        return;
    }
    else{
        document.forms[0].onsubmit=function(){
            if(valida())
                {
                alert("controllo superato, faccio il submit");
                document.forms[0].submit();
                }
            else{
                alert("Alcuni campi non sono stati selezionati");
                return(false);
                }
        };
    }
};


function valida(){
    var arr = document.getElementsByClassName("req");
    valido=true;
    dim = arr.length;
    alert("Numero di elementi obbligatori "+dim);
    
    for(var i=0 ; i<dim ; i++){
        alert("i="+i+" "+arr[i].name);
        if( arr[i].type=="text" && (arr[i].length<=0 || arr[i].value=="") ){//campo text
            valido=false;
            arr[i].className="segnala";
            
            
        }
        else if(arr[i].type=="select-one" && arr[i].value==""){//campo select
            valido=false;
            arr[i].className="segnala";
        }
        
    }
    alert("Ho ciclato "+i );
    return valido;
}

[AtoXx]

Cavolo ho trovato cosa non andava e mi faceva perdere elementi!!!!

arr[i].className="segnala"

non funziona! Ma come si cambia la classe di un elemento da javascript?Non in quel modo?


Allora è ufficiale non conosco js.
Ma è normale che se utilizzo la chiamata ad arr[i] 2 volte di seguito mi salta all'elemento successivo? Nel senso se chiamo arr[i] con i=0 e subito dopo (nel primo if) faccio di nuovo arr[i] (sempre con i=0 ovviamente) mi faccia accedere all'elemento successivo, cioè come se arr[i] avesse i=1.

[cavicchiandrea]

La classe si assegna così, comunque prova anche setAttribute("class","nomeclasse")

[AtoXx]

ok, provo col setAttribute. Ma sbaglio ad odiare js?


Niente non riesco a cambiare la classe dell'elemento e mi fa andare tutto a puttane direi. Ci dev'essere qualcosa che non va nel codice.
Adesso ho così aggiornato il codice
[CODICE]
function valida(){
var arr = document.getElementsByClassName("req");
valido=true;
dim = arr.length;
alert("Numero di elementi obbligatori "+dim);

for(var i=0 ; i<dim ; i++){
elem = arr[i];

if( elem.type=="text" && (elem.length<=0 || elem.value=="") ){//campo text
valido=false;
//elem.className="segnala";
elem.setAttribute("class","segnala");
//continue;


}
else if(elem.type=="select-one" && elem.value==""){//campo select
valido=false;
elem.className="segnala";
}

}
alert("Ho ciclato "+i );
return valido;
}


[/CODICE]

[Vindav]

for(var i=dim-1 ; i>=0 ; i--){

[AtoXx]

Ma non è equivalente a quello che ho fatto io?


Mettondo il ciclo come mi hai detto, adesso funziona e mette le classi!Ma perchè così va e facendo il ciclo partendo con i=0 non va?

[AtoXx]

for(var i=dim-1 ; i>=0 ; i--){

Come mai facendo il ciclo così funziona?

[badaze]

Prova a mettere un alert(arr.length) dopo il for.
Vedrai che la lunghezza varia. È come se cambiando la class di un elemento si togliesse un elemento dell'array.
Ma siccome l'indice cresce e l'array diminuisce hai il problema.
Mentre partendo dalla fine l'indice e l'array diminuiscono insieme.

[AtoXx]

Ti ringrazio badaze, non sapevo di questo comportamento. Che @@ javascript però xD