invio e validazione form in jquery/ajax

**processore** · 20-09-2014, 14:38

salve.
ho un altro problema che non riesco a risolvere.
io ho un form con diversi campi(img text textarea).
fino a ora inviavo il form in html normale e facevo la validazione con jquery in questo modo.

codice:

$(document).ready(function()
{
	// my method for validate username
	
		
	$("#form_annuncio").validate(
	{
        rules:{
		'tit':{
			required: true,
			maxlength: 80,
			
			},
		'categoria1':{
			required: true,
			},
		'categoria2':{
			required: true,
			},
		'categoria3':{
			required: true,
			},
		'condizione':{
			required: true,
			},
							
		'prezzo':{
			required: true,
			
			},
		'spedizionePrezzo':{
			required: true,
			
			}							
		
		},
        messages:{
		'tit':{
			required: "Il campo titolo e obbligatorio!",
			maxlength: "Puoi inserire massimo 80 caratteri"
			},
		'categoria1':{
			required: "Il campo categoria è obbligatorio!",
			},
		'categoria2':{
			required: "Il campo categoria è obbligatorio!",
			},
		'categoria3':{
			required: "Il campo categoria è obbligatorio!",
			},
		'condizione':{
			required: "Il campo condizione è obbligatorio!",
			},
							
		'prezzo':{
			required: "Il campo prezzo è obbligatorio!",
			
			},
		'spedizionePrezzo':{
			required: "Il campo prezzo spedizione è obbligatorio!",
			
			}			
		
		}
	});
});

ora vorrei inviare il form tramite jquery per mettere un immagine che dice attendere fine caricamento.

e avevo pensato di fare cosi:

codice:

$(document).ready(function(){
 $("#invio").click(function(){
			//To Display progress bar 
			
			
			
			
			$("#loading").show(); 
var dati = $("#form_annuncio").serialize(); //recupera tutti i valori del form automaticamente






 
//form invio dati post ajax
 
//questo alert potete levarlo, serve solo per farvi capire come vengono passati i dati
alert(dati);
 
//invio
$.ajax({
type: "POST",
url: "processing.php",
data: dati,
dataType: "html",
success: function(status){
					
					//To Hide progress bar 
					$("#loading").hide();
					alert(status);
					document.location.href="prova.php";
				  },
error: function()
{
alert("Chiamata fallita, si prega di riprovare...");
}
 
});//ajax
 
});//bottone click
});

codice:

<form name="form_annuncio" action="#" method="post" enctype="multipart/form-data" id="form_annuncio" >

<input type="text" name="tit" size="70" class="margine_sinistra_errori"  />
.........
<input type="bottom" id="invio" value="invia"/>
</form>

se invio il form con un submit normale in html il controllo funziona

mentre se faccio l'invio tramite jquery/ajax
mi invia i dati anche se non ho compilato niente,
l'invio non viene bloccato dalla validazione.

come posso fare ?
grazie

**cavicchiandrea** · 20-09-2014, 14:49

Prova cosi e togli il primo blocco rady (quello dove ora c'è il validate) dal documento

codice:

$(document).ready(function(){
 $("#invio").click(function(){

$("#form_annuncio").validate(
    {
        rules:{
        'tit':{
            required: true,
            maxlength: 80,
            
            },
        'categoria1':{
            required: true,
            },
        'categoria2':{
            required: true,
            },
        'categoria3':{
            required: true,
            },
        'condizione':{
            required: true,
            },
                            
        'prezzo':{
            required: true,
            
            },
        'spedizionePrezzo':{
            required: true,
            
            }                            
        
        },
        messages:{
        'tit':{
            required: "Il campo titolo e obbligatorio!",
            maxlength: "Puoi inserire massimo 80 caratteri"
            },
        'categoria1':{
            required: "Il campo categoria è obbligatorio!",
            },
        'categoria2':{
            required: "Il campo categoria è obbligatorio!",
            },
        'categoria3':{
            required: "Il campo categoria è obbligatorio!",
            },
        'condizione':{
            required: "Il campo condizione è obbligatorio!",
            },
                            
        'prezzo':{
            required: "Il campo prezzo è obbligatorio!",
            
            },
        'spedizionePrezzo':{
            required: "Il campo prezzo spedizione è obbligatorio!",
            
            }            
        
        }
    });
            //To Display progress bar      
            $("#loading").show(); 
var dati = $("#form_annuncio").serialize(); //recupera tutti i valori del form automaticamente






 
//form invio dati post ajax
 
//questo alert potete levarlo, serve solo per farvi capire come vengono passati i dati
alert(dati);
 
//invio
$.ajax({
type: "POST",
url: "processing.php",
data: dati,
dataType: "html",
success: function(status){
                    
                    //To Hide progress bar 
                    $("#loading").hide();
                    alert(status);
                    document.location.href="prova.php";
                  },
error: function()
{
alert("Chiamata fallita, si prega di riprovare...");
}
 
});//ajax
 
});//bottone click
});

codice:

<form name="form_annuncio" action="#" method="post" enctype="multipart/form-data" id="form_annuncio" >

<input type="text" name="tit" size="70" class="margine_sinistra_errori"  />
.........
<input type="bottom" id="invio" value="invia"/>
</form>

**processore** · 21-09-2014, 10:21

niente non funziona nemmeno cosi

sembra che il validate lo salta

**cavicchiandrea** · 21-09-2014, 11:09

Non conosco validate (se è questo vedi documentazione) forse è perché manca il tasto submit? Può essere devi studiarti bene la documentazione del validate che usi ritengo che supporti l'invio dei dati in ajax ma non posso esserne certo

**processore** · 21-09-2014, 12:44

sto provando un altra strada, non so se migliore o peggiore.
ho deciso di inviare il form normalmente senza jquery, e di inviare tramite jquery e ajax solo le immagini cosi metto una barra di caricamento.

la mia idea è quella di far selezionare l'immagine e inviare i dati in una pagina php dove effettua tutti i controlli sull'immagine e la copia in una cartella temporanea, e poi tramite json mi ritorna il nome dell'immagine che ho fatto si che fosse univoco.
poi dopo che le immagini sono caricate nel server invio il form in una pagina php che fa tutti i controlli sui dati e copia le immagini precedentemente caricate nella cartella temporanea li sposta nella cartella delle immagini.
ho solo un problema.

io invio le immagini alla pagina php e poi mi faccio ritornare il nome tramite json.
ma poi questo dato come faccio a usarlo nella pagina principale dove ho il form ?
per inviarlo alla pagina che salva tutti i dati ??

**cavicchiandrea** · 21-09-2014, 13:05

Originariamente inviata da processore

...
ma poi questo dato come faccio a usarlo nella pagina principale dove ho il form ?

E come si può rispondere a questa domanda senza conoscere il progetto?

per inviarlo alla pagina che salva tutti i dati ??

Imposti il valore ricevuto in un campo nascosto del form

**processore** · 21-09-2014, 18:26

cavicchi.
scusa forse la mia domanda era un po ambigua.
faccio l'esempio completo.
il codice dell'invio immagine è questo.

codice:

$(function () {
	$("#select").click(
		function () {
			$("#file").get(0).click();
			return false;
		}
	);
	
	$("#file").change(
		function () {
			var files = $(this)[0].files;
			if ( ! files.length ) {
				$("#selected").html("Nessun file selezionato!");
			} else {
				var img = new Image();
				$( img ).load(
					function () {
						window.URL.revokeObjectURL( this.src );
						$("#selected").html( files[0].name + "<br />" + $(this)[0].naturalWidth + " x " + $(this)[0].naturalHeight + " @ " + Math.round( files[0].size / 1024 ) + " Kb" );
						$("#send").show();
						$("#select").addClass("mini");
					}
				).attr( "src" , window.URL.createObjectURL( files[0] ) );
				
				$("#thumb").html( img );
			}
		}
	);
	
	$("#send").click(
		function () {
			$(this).hide();
			$("#select").hide();
			$("#progressbar").show();
			
			var fd = new FormData();
			fd.append("file", $("#file")[0].files[0]);
			
			$.ajax({
				url: "./image.php"
				, type: "POST"
				, data: fd
				, dataType: "json"
				, processData: false
				, xhr: function () {
					var xhr = $.ajaxSettings.xhr();
					xhr.upload.addEventListener(
						"progress"
						, function ( evt ) {
							if ( evt.lengthComputable ) {
								$("#progressbar").attr({value: evt.loaded, max: evt.total});
							}
						}
						, false
					);
					
					return xhr;
				}
			})
			.done(
				function( resp ) {
					$("#progressbar").hide();
					$("#selected").html( resp.status );
					$("#select").removeClass("mini").show();
					$("#progressbar").attr({value: "0", max: "100"});
				}
			);
		}
	);
});

la pagina che riceve l'immagine e poi esegue delle operazioni e questa.
per ora non fa niente e solo di prova.

codice:

<?php
    
      
    $json = json_encode(
        array(
           
            "nome"    => "nome immagine"
          )
    );
      
    echo $json;
?>

questo codice fa si che io abbia un upload immagine con anteprima, quando faccio invia immagine mostra una barra di progresso, quando ha inviato tutto stampa nel div selected "nome immagine".

ora quello che vorrei capire come fare (sempre se e possibile farlo).
e prendere questa stringa "nome immagine" ritornata dal json e inviarla a un altra pagina come valore di un campo hidden.

spero di essere stato piu chiaro

senno riprovo a formulare la domanda

**cavicchiandrea** · 21-09-2014, 18:40

Non so che dirti fatico a seguirti e dovrei capire meglio sia la logica che il progetto, credo sia meglio che attendi che qualcuno più intuitivo trovi la soluzione

Discussione: invio e validazione form in jquery/ajax

Strumenti discussione

Ricerca discussione

Visualizza

invio e validazione form in jquery/ajax

Permessi di invio