Devi applicare una classe ai campi di input (ad es. class="testo") che li formatta tramite regole CSS normalmente. Poi, quando fai il controllo con JavaScript, se il campo è vuoto, gli cambi dinamicamente il nome della classe con quello di un'altra classe contenente la regola per lo sfondo giallo. Supponendo il controllo di un solo campo, avrai un codice simile a questo:
codice:
function controlla(id) {
if (document.getElementById(id).value=="") {
document.getElementById(id).className = "";
document.getElementById(id).className = "errore";
document.getElementById(id).focus();
}
}
Se il campo è vuoto, il codice gli "annulla" il nome della classe associata ai campi di testo (class="testo"). Poi gli applica una nuova classe ("errore") che nel CSS avrà un background-color impostato sul colore giallo, quindi dà il focus al campo. Questa funzione va richiamata possibilmente all'onblur sul campo o all'onsubmit del form (anche se in questo caso, dovresti controllare ciclicamente tutti i campi di testo obbligatori).
Ovviamente, devi associare ad ogni campo di testo una funzione (all'onclick o all'onchange ad es.) in modo che appena l'utente ci clicca dentro o modifica il valore errato (ovvero ci inserisce un valore), riassocia al campo la classe "testo":
codice:
<head>
<script type="text/javascript">
function reimpostaClasse(id) {
document.getElementById(id).className = "";
document.getElementById(id).className = "testo";
}
</script>
</head>
<body>
<form>
<input type="text" id="nome" name="nome" class="testo" size="22" value="" onchange="reimpostaClasse(this.id);" />
Come avrai notato prima di applicare la nuova classe "annullo" sempre la classe corrente (document.getElementById(id).className = ""). Questo perché ho notato un comportamento strano di IE.
Permessi di invio
Rispondi quotando