Controllo dynamic

Controllo singolo per campo, poi controllo multiplo in fondo

by Produezero Srl

HTML

<input class="campo-0" type="text" onkeyup="uno(this);" onfocusout="uno(this);"/>
<input class="campo-1" type="text" onkeyup="due(this);" onfocusout="due(this);"/>
<a href="#" onclick="tre();">VAI</a>
<script type="text/javascript">
var errore;
var controllo = 1;
var errori = [];
window.onload = function(){
	//Inizializzo al caricamento della pagina l'array degli errori con tutti gli elementi a 0
  errori = [0,0];
}
function uno(campo) {
		var valore = campo.value;
		if(valore.length == 0){
    	errore = 1;
      campo.classList.add('errore');
    } else {
    	errore = 0;
      campo.classList.remove('errore');
    }
    errori[0] = errore;
}
function due(campo) {
		var valore = campo.value;
		if(valore.length == 0){
    	errore = 1;
      campo.classList.add('errore');
    } else {
    	errore = 0;
      campo.classList.remove('errore');
    }
    errori[1] = errore;
}
function tre() {
		for(var i = 0; i < errori.length; i++) {
    	if(controllo == 1) {
    		if(errori[i] != 1) {
        	controllo = 1;
    		} else {
        	controllo = 0;
        }
    	}
    }
    if(controllo == 1) {
    	alert('può andare!')
    } else {
    	for(var d = 0; d < errori.length; d++) {
      	var campo = document.querySelector('.campo-'+d);
        var valore = campo.value;
				if(valore.length == 0){
      		campo.classList.add('errore');
    		} else {
      		campo.classList.remove('errore');
    		}
      }
    }
}
</script>

CSS

.errore {
  border: 2px solid red;
}