Newsgroup: it.comp.lang.javascript
Titolo: Uni-Form - validazione e Ajax

Buongiorno a tutti,
sto usando uni-form [1] per dare un aspetto graficamente carino ad
alcuni form web, trattasi di un CSS e un pï¿œ di HTML giï¿œ pronto, con
l'aggiunta di JQUERY in fase di validazione, con un metodo di
validazione accattivante.
 
Il form si preoccupa di fare la validazione quando viene premuto il
pulsante di submit, in caso di errori, questi vengono evidenziati,
altrimenti il tutto procede con un submit vero e proprio del form.
 
La mia esigenza ï¿œ quella di poter fare una chiamata ajax invece del
submit (per caricare in un div ad esempio il risultato della query di
inserimento dati nel db), senza perdere la fase di validazione, ovvero
premo il tasto (i.e. "Invia") del form, parte la validazione e se ï¿œ
tutto ok, lancia una funzione ajax o una jquery.load() invece che fare
il classico form submit.
 
Ho provato a leggermi buona parte del forum di supporto e la
documentazione ma non c'ï¿œ un'implementazione diversa dal submit
standard, eppure concettualmente non mi sembra cosï¿œ difficile
intercettare la fine del codice di validazione, dove diciamo da l' "OK"
e mettere li una chiamata.. il problema ï¿œ che essendo poco avvezzo a JS
non sono riuscito a cavarne molto e quindi chiedo il vostro aiuto.
 
Il file di esempio del progetto per la validazione ï¿œ questo [2], mentre
la parte js di validazione ï¿œ qui [3].
 
Grazie mille a tutti,
anche solo per aver letto fin qui :)
YUS
 
[1] 
http://sprawsm.com/uni-form/
 
[2]
https://github.com/draganbabic/uni-form/blob/master/demos/validation.html
 
[3]
https://github.com/draganbabic/uni-form/blob/master/js/uni-form-validation.jquery.js
 

 YUS
 
Prego, spero ti aiuti. Rimango comunque dell'idea che dovresti
contattare l'autore, o cambiare libreria con una che si confï¿œ ai tuoi
bisogni.

 bisogni.
 
Prima di postare sul NG ho postato sul forum dell'autore nella sezione
apposita, vero che ï¿œ trascorso solo un giorno, ma il fatto che le ultime
risposte risalissero a 3 mesi fa non mi ha fatto ben sperare, e quindi
ho chiesto *anche* qui.
 
Mea culpa non aver controllato che la libreria lo facesse, mi ha tratto
in inganno il fatto che fosse ben fatta ed abbastanza usata, ho dato per
scontato che facesse anche chiamate di questo tipo.. il problema ï¿œ che
ho giï¿œ implementato il form, ed arrivato al momento del test ho trovato
l'inghippo.
 
Di nuovo grazie.
YUS
 
 

 Di nuovo grazie.
 
Nessun problema!

 L'oggetto che passi al plugin. Ovvero, prendendo dall'esempio:
[cut]
 
Ok, ho seguito i tuoi suggerimenti modificando il file
uni-form-validation.jquery.js come segue (le righe che iniziano con *
sono quelle già presenti in origine che ho lasciato invariate) siamo
intorno alla riga 582, chiaramente gli * li ho messi solo qui, non nel file
 
 
*if (return_val === false) {
*	form.addClass('failedSubmit');
*}
 
if (return_val && $.isFunction(settings.ajax_submit_callback)) {
	settings.ajax_submit_callback(form);
	return false;
}
 
*return return_val;
 
 
 
Ho inserito la funzione doAjax poco prima di passare l'oggetto al plugin
(se mettevo la dichiarazione ajax dopo la funzione form.submit del file
uni-form-validation.jquery.js mi diceva doAjax not declared).
 
 
Passo l'oggetto in questo modo :
 
<script type="text/javascript">
 
	function doAjax(form,target_div,page) {
		$.post(page, $(form).serialize(), function(data) {
			$(target_div).html(data);
		})
	}
 
	$(function() {
		$('form.uniForm').uniform({
			prevent_submit : true,
			ajax_submit_callback : doAjax('form.uniForm','#miodiv','pagina.php')
		});
 
	});
 
</script>
 
Ho cambiato anche form.serialize() in $(form).serialize() come da te
suggerito perché dava errore ed ho aggiunto la ) dopo la prima } della
function doAjax perché me la richiedeva, anche se non riesco a capire
questa notazione.. io avrei chiuso la ) dopo "function(data)" ma mi da
errore.
 
In ogni caso, funziona tutto, anche troppo!
Quando richiamo la pagina con il form, invece di mostarmelo mi da SUBITO
il risultato di doAjax, caricandomi nel div la risposta.
 
Con firebug vedo le due chiamate, prima la .load() che carica il form e
subito dopo la chiamata a doAjax.
 
Dove sbaglio ??
 
Grazie di nuovo
YUS

 Grazie di nuovo
 
Hope it helps.
 

 `ajax_submit_callback` il valore di ritorno della stessa.
 
Questo mi è chiaro, ma ora la mia domanda è.. dove la posiziono nel
codice la chiamata a doAjax(param1,param2,param3)? Penso di doverla
posizionare all'interno del file del form, perché vorrei riutilizzarla
per inviare form con parametri diversi ogni volta.
 
Ri-grazie
YUS
 

 per inviare form con parametri diversi ogni volta.
 
No, in quanto – appunto – ogni volta vorrai avere un param2 e param3
diverso magari (un elemento e una pagina che variano in base alla pagina
in cui sei). Inoltre è una callback, non può stare nella stessa
libreria, ti freghi la modularità. La devi mettere nella pagina stessa
in cui definisci i settings, guarda gli esempi della libreria per quello
che riguarda le altre callback (tipo, mi pare, `prevent_submit_callback`).
 

 tutto funziona (se, funziona), allora passiamo al resto.
 
Mhh.. non funziona.
Ho rivisto il tutto posizionando le funzioni scritte da te in originale,
cambiando solamente i parametri hard coded.
 
Quando faccio il submit, viene effettivamente eseguito il submit.
 
Ho provato a mettere un paio di alert per debug come sotto, ed
effettivamente mi compare solo "fuori".
 
if (return_val && $.isFunction(settings.ajax_submit_callback)) {
 
	settings.ajax_submit_callback(form);
	alert("dentro");
	return false;
}
 
alert("fuori");
return return_val;
 
mi pare di capire che non entri nell'if.. return_val suppongo ci sia
perché se non compilo i campi del form mi da l'errore di validazione (e
l'alert "fuori"), è possibile che sia la seconda parte dell'if ?
 
a-ri-grazie!
 
YUS

 l'alert "fuori"), è possibile che sia la seconda parte dell'if ?
 
In tal caso continui a passare la funzione ai settings in modo
sbagliato, come facevi in precedenza.

         "isFunction: " + $.isFunction(settings.ajax_submit_callback))
 
 
Se aggiungo questa non funziona più.. anche mettendo le " mancanti dopo
"return_val:  e il ; a fine riga ajax_submit_callback));
non visualizza più neanche gli alert che avevo messo io..
 
uff.. dove sto sbagliando ?
YUS
 

 non visualizza più neanche gli alert che avevo messo io..
 
Prova a farla semplice, visto che prima ti funzionava è questo che ha
introdotto un errore:
 
    alert(returl_val)
    alert($.isFunction(settings.ajax_submit_callback))
 
Se continua a non mostrarti alcun alert, allora controlla l'error
console del tuo browser per capire dove sta l'errore.
 

 console del tuo browser per capire dove sta l'errore.
 
ho visto poi che c'è scritto returL_val .. invece della N..
mi dice return_val: undefined , isFunction: true
 
YUS
 

 mi dice return_val: undefined , isFunction: true
 
Suppongo tu lo abbia testato in assenza di errori di validazione nella
form. Se così fosse, cambia:
 
    if (return_val && $.isFunction(settings.ajax_submit_callback)) {
 
In:
 
    if (return_val !== false &&
$.isFunction(settings.ajax_submit_callback)) {
 
(tutto su una riga, è il newsreader che lo manda a capo)
 
Se invece ti da quel risultato in presenza di errori di validazione,
allora il problema è un altro.

 (tutto su una riga, è il newsreader che lo manda a capo)
 
 
Perfetto, ora funziona tutto, sia in pagina pulita html, sia con
caricamento dinamico.
 
Resta l'ultima questione aperta.. come posso gestire param2 e param3,
oltre a doAjax(form) e passarli di volta in volta a seconda del
form/pagina/div.. è complicato ?
 
Ps. Di dove sei ? a grandi linee.. devo almeno pagarti da bere! :D
 
YUS

 devo almeno pagarti da bere! :D
 
Magari se capiti in qualche conference o workshop sulla programmazione,
ben volentieri. ;)
 

 ben volentieri. ;)
 
Speriamo! :D Se invece ripassi di qui, avvisa!
 
YUS