Cambia colore quando il campo del form è vuoto

**fraude** · 29-08-2008, 10:33

Ciao a tutti.

Con la seguente funzione javascript controllo che tutti i campi di un form siano compilati: se così non è tramite l'attributo campo.focus(); il cursore si posiziona nel campo non compilato.

E' possibile attribuire allo sfondo del campo non compilato anche un colore diverso da quello dei campi già compilati?

Solo per evidenziare meglio qual'è il campo lasciato vuoto.

codice:

<SCRIPT>
<!--

function validate(theform)

{ 

  for (var a = 0; a < theform.elements.length; a++) 
	{
	var campo = theform.elements[a];

      if (campo.value.length <= 0)
      
		{
        	window.alert('Il campo "'+ campo.name +'"\nè un campo obbligatorio in questo form.');
        	campo.focus();
        	return false;
       }
    }

	return(true);
  
}

// -->

 </script>

**pietro09** · 29-08-2008, 11:30

dopo campo.focus(); metti

campo.className = "mia_classe";

dove mia_classe la definisci nel foglio di stile

**fraude** · 29-08-2008, 11:46

Originariamente inviato da pietro09
dopo campo.focus(); metti

campo.className = "mia_classe";

dove mia_classe la definisci nel foglio di stile

Grazie.

Ho solo un problema:

- una parte dei campi del form sono delle select e quando lancio il campo associa la "mia_classe" la select non mostra più i valori prima visualizzati...

hai qualche esempio che gestisce anche le select di un form ?

**pietro09** · 29-08-2008, 11:48

**viki1967** · 31-08-2008, 11:03

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

</head>

<script language="javascript">
<!--
 
function validateForm(Qform)
{
    var incorrect = new Array();
    var no = 0;
    for (var a = 0; a < Qform.elements.length; a++)
    {
        var field = Qform.elements[a];
 
        if (field.value.length <= 0)
        {
            incorrect.push( field );
            no ++;
        }
        else
        {
            field.style.backgroundColor="";
        }
    }
    for( j=0; j<no; j++) 
    {
        incorrect[j].style.backgroundColor="#FF0000";
    }
    
    if ( no > 0)
    {
        incorrect[0].focus();
        return false;
    }
    else
    {
        return true;
    }
}
-->
</script>
 
<body>

<form action="" method="post" onSubmit="return validateForm( this );">
<span id="1">Titolo: </span>
<input name="Titolo" id="Titolo" type="text" size="25" maxlength="6">



<span id="1">Contenuto : </span>
<input name="Contenuto" id="Contenuto" type="text" size="25" maxlength="6">



<span id="1">Select: </span>
<select size="1" name="select" id="select">
<option>sel</option>
<option value="test">test</option>
<option value="test_2">test_2</option>
</select>



<input id="submit" type="submit" value="OK" />

</form>
</body>
</html>

Discussione: Cambia colore quando il campo del form è vuoto

Strumenti discussione

Ricerca discussione

Visualizza

Cambia colore quando il campo del form è vuoto

Permessi di invio