Problema Ajax-JQuery Validation+Submit

**GianluModì** · 14-09-2012, 17:17

Salve a tutti,

vi posto di seguito il codice che sto utilizzando al momento per effettuare la validazione del form in tempo reale, e di conseguenza il submit dei dati ad uno script php che elabora gli stessi e restituisce un messaggio di operazione effettuata.

Vorrei che IL TUTTO fosse fatto SENZA cambiare pagina!

codice:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<script type="text/javascript">


$(document).ready(function(){

$('#val_form').validate({
		rules: {
			nome: {
				required: true,
				minlength: "2"	
			},
			cognome: {
				required: true,
				minlength: "2"
			}	
		},
		
		messages: {
			nome: {
				required: "Campo obbligatorio!",
				minlength: "Nome troppo corto!"
			}	
		}
	});




$('#submit').click(function(){
	$.ajax({
		type:"POST",
		url: "check.php",
		data: {nome: document.getElementById('nome').value, cognome: document.getElementById('cognome').value},
			success:function(){
				$('#validation2').html(msg);
			}
		}
	);
});
});
</script>
<body>

<div id="validation">
<form method="post" id="val_form" name="val_form" action="">
<label for="nome">Nome: *</label>
<input id="nome" name="nome" type="text" required/>


<label for="cognome">Cognome: * </label>
<input id="cognome" name="cognome" type="text" required/>

<div id="button">
	<input type="submit" id="submit" value="invia"/>
</div>
<div id="validation2"></div>
</form>
</div>


</body>
</html>

Supponiamo che lo script "check.php" restituisca solo un messaggio di avvenuta registrazione.

La validazione dei campi in tempo reale è totalmente funzionante, il mio problema è che il submit dei dati non viene fatto regolarmente e il messaggio non appare, anzi appare solo nel momento in cui invio i dati con i campi vuoti, dove sbaglio ??

Ringrazio tutti e aspetto il vostro aiuto.

**cavicchiandrea** · 14-09-2012, 18:11

codice:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<script type="text/javascript">


$(document).ready(function(){

$('#val_form').validate({
		rules: {
			nome: {
				required: true,
				minlength: "2"	
			},
			cognome: {
				required: true,
				minlength: "2"
			}	
		},
		
		messages: {
			nome: {
				required: "Campo obbligatorio!",
				minlength: "Nome troppo corto!"
			}	
		}
	});
$('#invio').live({//apro live
click:function(){//apro click
	$.ajax({//apro ajax
		type:"POST",
		url: "check.php",
		data: $("#val_form").serialize(),
			success:function(){//apro success
				$('#validation2').html(msg);
			}//chiudo success
		});//chiudo ajax
}//chiudo click
})//chiudo live
});
</script>
<body>

<div id="validation">
<form method="post" id="val_form" name="val_form" action="">
<label for="nome">Nome: *</label>
<input id="nome" name="nome" type="text" required/>


<label for="cognome">Cognome: * </label>
<input id="cognome" name="cognome" type="text" required/>

<div id="button">
	<input type="submit" id="invio" value="invia"/>
</div>
<div id="validation2"></div>
</form>
</div>


</body>
</html>

Prova cosi o cambiato Event Handler usando live serialize() per recuperare i dati del form e id del tasto submit (la parola submit è riservata meglio non usarla per nomi o id)

**GianluModì** · 17-09-2012, 09:41

Ho fatto precisamente come mi hai consigliato, rimane ancora un problema, quando faccio il submit dei dati, i dati sembra che vengano elaborati ma non mi arriva il messaggio di risposta dal "check.php".. sai consigliarmi ?

**cavicchiandrea** · 17-09-2012, 11:41

Originariamente inviato da GianluModì
Ho fatto precisamente come mi hai consigliato, rimane ancora un problema, quando faccio il submit dei dati, i dati sembra che vengano elaborati ma non mi arriva il messaggio di risposta dal "check.php".. sai consigliarmi ?

avendo fatto un copiaincolla non visto che mancava la variabile nel success

codice:

success:function(msg){//apro success
				$('#validation2').html(msg);

**GianluModì** · 17-09-2012, 11:45

Mi ero accorto di quella dimenticanza e avevo provveduto a sistemarla, ma il problema persiste ? Come posso fare ?

Grazie ancora!

**Vindav** · 17-09-2012, 11:49

nel plugin validate è stata creata la callback submitHandler per gestire il submit, usare una funzione apposta per gestire l'evento non ha senso, se vuoi utilizzare il plugin di validazione sfrutta tutte le funzionalità disponibili.

anzi appare solo nel momento in cui invio i dati con i campi vuoti, dove sbaglio ??

Se i campi sono vuoti non dovrebbe nemmeno effettuare il submit, perche altrimenti utilizzare il plugin di validazione? la callback submitHandler verrà richiamata soltanto quando la validazione del form è andata a buon fine.
Partendo dal punto che è completamente sbagliata la gestione del submit, ci sono errori nel codice postato, perche gestire l'evento click quando si vuol effettuare il submit(che sia una chiamata ajax è indifferente)? esiste l'evento onSubmit apposta, anche l'uso del metodo live non vedo a che serve.

**cavicchiandrea** · 17-09-2012, 11:50

Sicuro che check.php vada bene?
Posta un link alla pagina pubblica (tuosito.xxxx/tuapaginademo.xxxx)

**GianluModì** · 17-09-2012, 12:15

Questo è lo script PHP

codice:

<?php
    $nome = $_POST['nome'];
    $cognome = $_POST['cognome'];
    
        echo $nome . " " . $cognome;
?>

Questo è il link:

http://www.barlivorno.it/test3/provaForm.php

**cavicchiandrea** · 17-09-2012, 16:17

Come diceva Vindav dovrebbe essere sufficiente mettere
$.validator.setDefaults({
submitHandler: function() { qui ci metti la chiamata ajax}
});
e risolvi

Discussione: Problema Ajax-JQuery Validation+Submit

Strumenti discussione

Ricerca discussione

Visualizza

Problema Ajax-JQuery Validation+Submit

Permessi di invio