Validation de formulaire par AJAX

Version imprimable

18/12/2010, 09h57
etoileweb

Validation de formulaire par AJAX

Bonjour,
Je voudrais savoir comment faire valider ses formulaires sans recharger la page, un peu comme le formulaire d'inscription sur twitter par exemple.
Lorsque vous remplissez un champ, il est automatiquement validé et un message s'affiche pour informer si les données sont conformes ou pas. J'imagine que cela se fait via AJAX. Y a-t-il un moyen "symfonique" de réaliser cela ? Merci.

Créé une requête asynchrone sur le déclenchée par le click de validation du formulaire.

En javascript:
- Stop l'action pour que le formulaire ne se "submit" pas.
- Requête asynchrone en post ou tu y met les données de ton formulaire. L'URL va être celle de ton formulaire que tu peux récupérer dans le javascript.

Tu récupère tout ça normalement dans ton contrôleur "symfo-nique" comme tu dis.

Bien sur, retourne un résultat ! Tu le traite en javascript pour afficher si l'action a marché ou non. Tant qu'a faire, retourne les erreurs le cas échéant.

Un exemple vite fait avec mootools (non testé).
Code:

1 2 3 4 5 6 7 8 9 10 $('myForm').addEvent('submit', function(key) { key.stop(); var options = { url : $('myForm').action, method : 'post', onSuccess: function() { // ici tu traite ton résultat }; new Request(options).post(); });

Voici un tout petit exemple, en trois parties (xhtml/JS/PHP)

Code:

1
2
3
4
<form id="monform" action="<?php echo url_for('@traiteMonForm')?>" method="post">
  <!-- Les champs ici avec renderRow() -->
  <p><input type="submit"/></p>
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// avec JQuery
$('#monform').submit(function(){
  var form = $(this);
  var action = form.attr('action');
  var method = form.attr('method');
  $.ajax({
    url: action,
    method: method,
    data: form.serialize(),
    success: function(response){
      // traitement de la réponse ici
    }
  });
  return false;
});

Code:

1
2
3
4
5
6
7
8
9
10
11
<?php
public function executeTraiteMonForm(sfWebRequest $request){
  $this->forward404Unless($request->isXmlHttpRequest()); // optionnel
 
  $form = new MonForm();
  // Traitements et validation du formulaire
 
  /* Pour retourner le résultat du traitement, on peut renvoyer au JS du JSON (json_encode) par exemple
  ou un simple 0/1... Tout cela avec renderText() */
}
?>

22/12/2010, 20h27
Michel Rotta

J'ai plus simple...

Première chose, il ne faut surtout pas désactiver la validation en php y compris l'éventuel renvois du formulaire, pour le cas où l'utilisateur n'aurait pas de JS actif sur son poste (faut bien valider) ou encore, celui qui modifierait le paquet POST avant l'envoie...

Tu as un plugin qui prend les validators et les utilises en JS pour pré-valider le formulaire, il marche avec 95% des validators, ce qui n'est déjà pas si mal.

Le plugin : sfJqueryFormValidationPlugin et tu n'as rien à retoucher.