Controllo campi di un form in javascript

[JpHack]

Ragazzi il mio è un problema molto semplice, ho questo form:

<form method="POST" action="verifica_contattaci.php" id="formcontattaci" >
<label for="email"><font color="#fff" size="4">[b]Tua email:[/b]</font></label> 

<input id="email" type="text" name="email" /> 


 
<label for="argomento"><font color="#fff" size="4">[b]Oggetto:[/b]</font></label> 
 
<input type="radio" name="argomento" value="supporto" /> <font color="#fff" size="3">[i]Supporto[/i]</font> 
 
<input type="radio" name="argomento" value="segnalazione" /> <font color="#fff" size="3">[i]Segnalazione[/i]</font> 
 
<input type="radio" name="argomento" value="altro" /> <font color="#fff" size="3">[i]Altro...[/i]</font> 


 
<label for="messaggio"><font color="#fff" size="4">[b]Messaggio:[/b]</font></label> 
 
<textarea id="supporto" name="messaggio" ></textarea> 

 <input type="submit" name="invia" value=" INVIA " /> 






 </form> 

Nel quale voglio fare dei controlli, voglio tutti required e l'email che sia email valida allora ho scritto questo script in js:

jQuery(document).ready(function($){
// validazione
$("#formcontattaci").validate({
 // regole
 rules:{ 
   email:{ required: true, email: true },
   argomento:{ required: true }, 
   messaggio:{ required: true } 
 },
 // messaggi d'errore
 messages:{ 
   email:{ required: " <font color=red>Devi inserire la tua email!</font>", email: " <font color=red>Devi inserire una email valida!</font>" }, 
   argomento:{ required: " <font color=red>*</font>" },
   messaggio:{ required: " <font color=red>Devi inserire un messaggio!</font>" }
 }, 
}); 
});

Il problema è che non funziona e va direttamente alla "action" del form...
Ovviamente ho anche messo nell'head:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/controllocontattaci.js"></script>

[cavicchiandrea]

- Le API di validate le hai lette?

[Nobody33]

1) Innanzitutto aggiornati la libreria alla versione minima di 1.7 + (quella 2.0 + non sopporta + i browser dall'età della pietra {IE7,8}).

2) uno stile per i messaggi lo dai nel css.

Seguendo il suggerimento di @andrea:

3)

jQuery(document).ready(function($){
// validazione
var validator =   $("#formcontattaci").validate({
ecc.....

4) ad ogni input devi associare la classe required

<input class="required" />

5) questo qui che messaggio di errore sarebbe

argomento:{ required: " <font color=red>*</font>" },

6) per l'invio con ajax (lo metti dentro .validate({ ecc.... ):

submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "percorso/submit.php",//metti il controllo/submit.php in un file separato
                 data: $(form).serialize(),
                 success: function () {
                      $('#divcontatti').fadeOut(1000);
                    $('#messaggio di invio').delay(1000).fadeIn(1000);
                 }
             });
             return false;

7) In ogni caso, fatti anche un controllo .php perché altrimenti basterebbe disattivare javascript e tutto il controllo servirebbe a nulla.

8) Infine, se cerchi esempi vai QUI