Validazione Form + XMLHttpRequest

[GianluModì]

Salve a tutti,

è qualche giorno che sto incontrando problemi a collegare la validazione del form (tramite AJAX) + registrazione dei dati (sempre tramite AJAX).

Il codice è il seguente:

<script> $(document).ready(function(){ $("#contactform22").validate({ 
onchange: false }); 
$("#formname2").rules("add", 
{ required: true,
 minlength: 3, 
remote: { url : "check-username.php", type : "post" }, 
messages: {
 required: "Required input",
minlength: jQuery.format("Please, at least {0} characters are necessary"),
 } 
});
 $("#formemail2").rules("add",
 { required: true,
 minlength: 6,
 remote: { url : "check-email.php", type : "post" },
 messages: { 
required: "Required input", minlength: jQuery.format("Please, at least {0} characters are necessary"), 
} 
});
 $("#fortelefono2").rules("add", 
{ required: true, 
minlength: 8, 
remote: { url : "check-telephone.php", type : "post" }, 
messages: { required: "Required input", minlength: jQuery.format("Please, at least {0} characters are necessary") } 
});
 }); 



function loadXMLDoc() {
 var xmlhttp;
 if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 

xmlhttp=new XMLHttpRequest(); } 

else {// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 

xmlhttp.onreadystatechange=function() { 
if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("formname2").value = ""; 
document.getElementById("formemail2").value = ""; 
document.getElementById("fortelefono2").value = ""; 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
}
 } 

name = document.getElementById("formname2").value; 
email = document.getElementById("formemail2").value; 
telefono = document.getElementById("fortelefono2").value; xmlhttp.open("GET","parameter.php?formname2=" + name + "&formemail2=" + email + "&fortelefono2= " + telefono + "",true); xmlhttp.send(); 
} </script>

e il form è il seguente:

<form action="" method="post" class="cmxform" id="contactform22"> 
<div class="ambitios_input_height field2"> 
<label for="formname2">Nome:</label> 
<input id="formname2" name="formname2" class="required ambitios_input" type="text" size="20" minlenght="3" /> 
</div>
 <div class="ambitios_input_height field2">
 <label for="formemail2">E-mail:</label> 
<input id="formemail2" name="formemail2" class="required email ambitios_input" size="25" type="text" /> 
</div>
 <div class="ambitios_input_height field2"> 
<label for="fortelefono2">Telefono:</label> 
<input id="fortelefono2" name="fortelefono2" class="required ambitios_input" type="text" /> </div> 
<div class="ambitios_submit field2" id="myDiv"> 
<input type="button" class="ambitios_foot_button" value="send" name="contactus" id="contactus" onclick="loadXMLDoc()" />

La validazione dei campi in tempo reale funziona e l'inserimento sul db tramite parameter.php anche!

Il mio problema è questo: la send() allo script PHP viene fatta sempre in qualunque caso anche se i campi sono errati, come posso fare per collegarla al controllo dei singoli campi ?

Spero di essere stato abbastanza esauriente.

Grazie!

[Vindav]

Per gestire l'invio dei dati tramite ajax puoi usare il metodo submiHandler del plugin,verrà richiamato solo se non ci sono errori

$(".selector").validate({
submitHandler: function(form) {
// do other stuff for a valid form
form.submit();
}
})

al posto del submit ci inserisci la tua chiamata ajax.

Inoltre non capisco che bisogno ci sia di usare il metodo rules, il metodo rules è stato creato per permettere di aggiungere o rimuovere una o piu regole di validazione successivamente, quando la pagina è già stata caricata e per qualche motivo ti è necessario modificare le regole di validazione di qualche specifico campo o aggiungerne a un campo appena creato. Capirai quindi che nel tuo caso è inutile,stai utilizzando un metodo per uno scopo per cui non è stato creato, dovresti usare la sintassi standard che poi è anche più semplice e intuitiva, un esempio preso dal sito.

$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
})