validazione form jquery

[n1o]

Ciao a tutti ragazzi intanto premetto che non conosco molto bene javascript, ho implementato nel mio sito una piccola funzione jquery(con il plugin validation) per effettuare una validazione lato client di un campo di ricerca con un valore. Lo script funziona(mi stampa l'errore a video con il testo ed un cambio di colore, al contempo funziona anche l'inserimento di un valore corretto e mi restituisce i giusti valori) ma vorrei che al momento di un inserimento errato di un campo mi evidenzi l'intero div e non solamente il[*] come avviene adesso, vi posto il codice:

form:

      <div id="container_box">
        <div id="container_request_title_left">
          

 Ricerca Dispacci per codice </p>
        </div>
        <div id="container_request">
          <form action="pippo.jsp" class="container" id="Ricerca">
                              

                            <label for="code">Codice </label>
                            <input type="text" name="code" id="code" size="30" />
                        
              


                <input type="submit" value="Ricerca">
              </p>
          </form>
        </div>
      </div>

script:

jQuery(document).ready(function($){
	//Regole di validazione
	$("#Ricerca").validate({
		rules: {
			code: {
				required:true,
				minlength:2,
                                maxlength:20
			}
		},//rules
		//Messaggi d'errore
    messages:{
    	code: {
    		required: "Codice non inserito",
    		minlength: "Codice inserito troppo breve",
                maxlength: "Codice inserito troppo lungo"

    	}
    },//messages
    //azioni da intraprendere in caso di errore
		highlight: function(element, errorClass){
			$(element).parent("li").addClass(errorClass);
		},
		//e quando l'errore viene risolto
		unhighlight: function(element, errorClass){
			$(element).parent("li").removeClass(errorClass);
		},
		submitHandler: function() {
                    document.getElementById('Ricerca').submit();
                }
	});//validate
});

Vome potrei fare per realizzare questo?
Vi ringrazio a tutti siete fantastici su questo forum

[Xinod]

puoi fare in modi diversi, per esempio cambiando .parent("li") in .parents('div').eq(0)
ciao

[n1o]

grazie mille xinod per la risposta ma non va, ho modificato lo script in questo modo:

 
highlight: function(element, errorClass){
			//$(element).parent("li").addClass(errorClass);
                        $(element).parents("div").eq(0).removeClass(errorClass); 
		},
		//e quando l'errore viene risolto
		unhighlight: function(element, errorClass){
			//$(element).parent("li").removeClass(errorClass);
                        $(element).parents("div").eq(0).removeClass(errorClass);
		},

e nel css ho modificato il metodo in questo modo:

#RicercaCodice div.error{
background-color:#fb7c62;
color:#6b081a;
border: #FF0000;
}

Scusami se la domanda è banale ma sono alle prime armi

[Xinod]

la parte javascript e' corretta e funzionerebbe

l' unica cosa a cui possa pensare e' che ci sia una regola piu' specifica di #RicercaCodice div.error che predomina
prova a settare in questa dichiarazione qualcosa che non puo' venir sovrascritta da altre regole:
border se non usi border, text-transform:uppercase ...

[n1o]

grazie mille Xinod
Ma non va ancora l'uppercase non lo vede neanche
questo è tutto lo script

jQuery(document).ready(function($){
	//Regole di validazione
	$("#RicercaCodice").validate({
		rules: {
			code: {
				required:true,
				minlength:2,
                                maxlength:20
			}
		},//rules
		//Messaggi d'errore
    messages:{
    	code: {
    		required: "Codice non inserito",
    		minlength: "Codice inserito troppo breve",
                maxlength: "Codice inserito troppo lungo"

    	}
    },//messages
    //azioni da intraprendere in caso di errore
		highlight: function(element, errorClass){
			//$(element).parent("li").addClass(errorClass);
                        $(element).parents("div").eq(0).removeClass(errorClass);
		},
		//e quando l'errore viene risolto
		unhighlight: function(element, errorClass){
			//$(element).parent("li").removeClass(errorClass);
                        $(element).parents("div").eq(0).removeClass(errorClass);
		},
		submitHandler: function() {
                    document.getElementById('RicercaCodice').submit();
                }
	});//validate
});

questo è il div xche dovrebbe modificarsi:

 <div id="container_box">
        <div id="container_request_title_left">
          

 Ricerca Dispacci per codice </p>
        </div>
        <div id="container_request">
          <form action="FindByCodeDispaccio_srv" class="container" id="RicercaCodice">
            

                    <label for="code">Codice </label>
                    <input type="text" name="code" id="code" size="30" />
                
            


                <input type="submit" value="Ricerca">
            </p>
          </form>
        </div>
      </div>

e questi sono i metodi nel css:

div#container_box{
    width: 95%;
    margin-top: 10px;
    margin-left: 10px;
}

div#container_request_title{
    width: 330px;
    margin-top: 10px;
    margin-left: 10px;
    padding-top:6px;
    background-color: #0000ff;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #ebff00;
}
div#container_request{
    display: block;
    width: 328px;
    margin-left: 20px;
    background-color: #ffffff;
    border: solid 1px #0000ff;
}

div#container_request_title_left{
    width: 330px;
    float: left;
    margin-left: 20px;
    padding-top:6px;
    background-color: #0000ff;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #ebff00;
}
div#container_request_left{
    float:left;
    width: 328px;
    margin-left: 20px;
    background-color: #ffffff;
    border: solid 1px #0000ff;
}

#RicercaCodice label.error{
  color:#9E142E;
  float:none;
  font-size:105%;
  font-weight:bold;
  margin-left:.5em;
}
#RicercaCodice ol{
  list-style:none;
  margin-top:3em;
}
#RicercaCodice li{
  padding-bottom:1em;
}
#RicercaCodice div.error{
background-color:#fb7c62;
color:#6b081a;
text-transform:uppercase
}

[Xinod]

intanto hai scritto 2 volte
$(element).parents("div").eq(0).removeClass(errorC lass);

poi non vedo elementi con questo id RicercaCodice, immagino vi sia e sia un contenitore superiore del form

questo pero' sicuro non si verifica
#RicercaCodice label.error

la classe error viene assegnata solo al primo div a risalire da code (container_request)
quindi la regola e' semmai
#RicercaCodice .error label

[n1o]

Questo metodo viene visto dal javascript

#RicercaCodice  label.error{   
color:#9E142E;   
float:none;   
font-size:105%;   
font-weight:bold;  
 margin-left:.5em; 
}

Invece questo non riesce proprio a vederlo

#RicercaCodice div.error{
background-color:#fb7c62;
color:#6b081a;
text-transform:uppercase
}

Ma ancora non riesco a capire come far colorare l'intero container_request

[Xinod]

piu' che ripetere quello che ho gia' scritto non posso
ciao