Form con validazione in Ajax con mootools – 1/3

Torno a scrivere un posto tecnico dopo quache mesetto, ma l’argomento rimane sempre lo stesso, Ajax.

Oggi vedremo come creare un form per permettere agli utenti di inserire dei dati, tipicamente per la registrazione ad un sito, e validarli (controllare cioè che non vi siamo errori) con la tecnica Ajax e appoggiandoci a PHP per quanto riguarda i controlli lato server.

Per creare gli effetti Ajax utilizzeremo il nostrano framework MooTools e PHP processerà i dati forniti in input. Ovviamente per lo scopo di questo tutorial il form non farà alcunchè se non mostrare messaggi di errore qualora ve ne siano.

Iniziamo procurandoci mootools e controllando che il server e l’interprete PHP funzionino correttamente (vi consiglio XAMPP); non ci resta che aprire il nostro editor di testo preferito, nel mio caso Notepad++ e iniziare con questo codice:

window.addEvent('domready',function(){
 $('registerForm').addEvent('submit', function(e) {
new Event(e).stop();

var log = $(‘log_res’).empty().addClass(‘ajax-loading’);
this.send({
update: log;
onComplete: function() {
log.removeClass(‘ajax-loading’);
}
});
});
});

*scusate la formattazione schifosa*

spieghiamo il codice: con la funzione addEvent in pratica diciamo che quando il DOM della finestra corrente è stato completamente caricato (domready) allora possiamo eseguire la funzione. Tale funzione si posiziona tramite la funzione $ sul div registerForm e aggiunge un evento, cioè quando si avvera submit esegue la funzione la quale crea una variabile log con il contenuto del log_res svuotato al quale aggiungiamo la classe ajax-loading nella quale andremo a posizionare il classico spinner. Quindi è possibile inviare il form aggiornando il div log il quale conterrà gli eventuali messaggi di errore e una volta fatto questo sarà possibile eliminare la classe ajax-loading per far scomparire lo spinner.

Per oggi finiamo qua, vi consiglio di dare un occhiata alla documentazione di mootools per capirne il meccanismo di funzionamento. La prossima volta vedremo come collegare l’esecuzione del codice javascript alla pagina PHP e realizzare le funzioni di validazione.

Alla prossima!

Technorati Tag: javascript, ajax, php, mootols, form, validazione