Questo codice utilizza sopratutto l'ajax, ora te lo spiego
C'è l'input con id="campo" quando si verifica l'evento onblur (ovvero quando, dopo aver cliccato dentro l'input, esce da questo input) richiama la funzione controllo. In questa funzione vengono specificate due variabili: "campo" e "errore". Ora queste variabli sono uguali al contenuto preso dal id campo ed errore, quindi queste due variabili sono uguali al contenuto del input id="campo" e al div id="errore". Ora if (se) i caratteri del valore della variabile campo sono inferiori a 1 (quindi 0) l'input cambia stile e diventa rosso, quindi viene inserito un messaggio di errore = "questo campo è richiesto" e viene cambiato anche lo stile di questo in rosso, else (altrimenti) lo style rimane nero. (ora ho messo che rimane nero per un ovvio motivo, se vede l'errore e inserisce un valore, che diventa maggiore di 1, dovrebbe tornare nero, ecco il motivo di questo)
Spero di essere stato abbastanza chiaro 
codice:
<html>
<head>
<style>
#campo {
border: 1px solid #000000;
}
</style>
<script>
function controllo(){
var campo = document.getElementById('campo')
var errore = document.getElementById('errore')
if(campo.value.length < 1){
campo.style.border = "1px solid red";
errore.innerHTML = "questo campo è richiesto";
errore.style.color = "red";
} else {
campo.style.border = "1px solid #000000";
}
}
</script>
</head>
<body>
<form>
<table><tr>
<td><input id="campo" type="text" onblur="controllo();" ></td><td><div id="errore"></div></td>
</tr></table>
</form>
</body>
</html>
Permessi di invio
Rispondi quotando