Comment valider et envoyer un formulaire avec AJAX?

12

J'ai créé un formulaire Web à l'aide de l'API Form. J'utilise l' #AJAXoption de champ pour ajouter la validation AJAX à chaque champ.

Est-il possible de valider et de soumettre le formulaire en utilisant AJAX sans recharger la page. Si la validation échoue, je veux afficher un message d'erreur et si la validation réussit, je veux afficher un message (idéalement dans une lightbox) et réinitialiser les champs du formulaire.

Mon code jusqu'à présent:

$form['name'] = array(
    '#type' => 'textfield',
    '#title' => t('Name'),
    '#default_value' => '',
    '#maxlength' => '128',
    '#required' => TRUE,
    '#ajax' => array(
        'callback' => '_validate_name',
        'wrapper' => 'name-error-icon-container',
        'method' => 'html',
        'effect' => 'none',
        'progress' => array(
            'message' => NULL,
        ),
    ),
);

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',
    '#ajax' => array(
        'callback' => '_handle_form_submit',
        'effect' => 'fade',
    ),
);

les fonctions de rappel ressemblent à ceci:

function _validate_name($form, $form_state) {

    if ($form_state['values']['name'] != '') {
    $output = 'OK';
    }
    else {
      $output = 'Enter a value';
    }

   return $output;

}

function _handle_form_submit($form, $form_state) {
}

Mais je ne sais pas ce qui devrait entrer dans la _handle_form_submitfonction pour valider puis renvoyer un message ou soumettre un formulaire et réinitialiser les champs?

Camsoft
la source

Réponses:

-2

Le module d'exemples a un formulaire ajax auquel vous pouvez vous référer ainsi que de nombreux autres. Voici un lien vers l' exemple de formulaire ajax dans le référentiel de code, mais je suggère de télécharger pour regarder l'implémentation de toute façon.

rocketeerbkw
la source
1
désolé - je ne peux pas trouver d'exemples de validation ajaxy dans le module d'exemple
ErichBSchulz
Oui, c'est une réponse gonflée juste là. En fait, je n'y vois aucune validation non plus. Chaque rappel renvoie simplement le formulaire.
AlxVallejo
2
Comment est-ce la réponse acceptée? Il ne dit même pas où chercher dans le lien fourni (et le lien n'a pas d'exemple de validation de toute façon).
robinmitra
Nouveau lien pour l'exemple de formulaire ajax: cgit.drupalcode.org/examples/tree/ajax_example/…
Brentg
J'ai fait ma réponse un wiki, car il est accepté mais de mauvaise qualité
rocketeerbkw
11

Je sais que cette question traîne depuis quelques années maintenant, mais je ne pense pas que les autres réponses aient vraiment raison de la soumission du formulaire Drupal 7 ajax, alors je vais essayer de l'expliquer.

Sinon, votre formulaire devrait fonctionner aussi bien sans ajax selon les bonnes pratiques, votre gestionnaire de soumission ajax ne devrait rien faire d'autre que renvoyer le formulaire. Tout le reste devrait être dans vos fonctions de validation et de soumission.

function ex_form($form, $form_state) {
  $form['name'] = array(
    '#type' => 'textfield',
     '#title' => t('Name'),
     '#default_value' => '',
     '#maxlength' => '128',
     '#required' => TRUE,
  );

  $form['submit'] = array(
   '#type' => 'submit',
   '#value' => 'Submit',
   '#ajax' => array(
     'callback' => 'ex_form_ajax_handler',
     'effect' => 'fade',
   ),
  );
}

function ex_form_submit(&$form, &$form_state) {
  // Submit logic - runs when validation is ok
  // You can alter the form here to be just a markup field if you want.
}

function ex_form_validate(&$form, &$form_state) {
  // Validation logic - invalidate using form_set_error() or form_error()
}

function ex_form_ajax_handler(&$form, &$form_state) {
  return $form;
}
OWast
la source
probablement la meilleure réponse
Andrew Kozoriz
Voulez-vous dire que les méthodes de validation et de soumission seront automatiquement appelées pour un rappel AJAX sur un bouton de soumission? Dans quel ordre les méthodes sont-elles appelées?
Jeff
3

Je pense que l' article de maxtorete du 17 octobre 2011 semble donner un exemple plus complet en utilisant à la fois form_validate()etform_submit()

(Je ne l'ai pas encore testé.)

La réponse de Joshua Stewardson au débordement de la pile a également un bel exemple de travail:

function dr_search_test_form($form, &$fstate) {

  $form['wrapper'] = [
    '#markup' => '<div id="test-ajax"></div>',
  ];

  $form['name'] = [
    '#type'     => 'textfield',
    '#required' => TRUE,
    '#title'    => 'Name',
  ];

  $form['submit'] = [
    '#type'  => 'submit',
    '#value' => 'Send',
    '#ajax'  => [
      'callback' => 'dr_search_test_form_callback',
      'wrapper'  => 'test-ajax',
      'effect'   => 'fade',
    ],
  ];

  return $form;
}

function dr_search_test_form_callback($form, &$fstate) {

  return '<div id="test-ajax">Wrapper Div</div>';
}

function dr_search_test_form_validate($form, &$fstate) {

  form_set_error('name', 'Some error to display.');
}

Joshua fait remarquer que les messages d'erreur de validation remplacent #ajax['wrapper']complètement l' élément, donc votre rappel doit réapprovisionner cet élément à mesure que vous le remplacez.

ErichBSchulz
la source
quand ce lien invalide c'est un signe la question n'est plus pertinente!
ErichBSchulz
2
le vote vers le bas est un peu dur - même si ce n'était qu'un lien - c'était un lien vers la réponse - pas seulement un lien vers un module qui n'a pas la réponse - contrairement à la réponse acceptée !! Quoi qu'il en soit, j'ai fourni du code de travail pendant que j'étais sous-voté.
ErichBSchulz,
thanks @ mbomb007 - résolu maintenant
ErichBSchulz
2

En général, la validation et la gestion de la soumission des formulaires doivent se produire dans les rappels habituels _validate () et _submit (). L'idée est que les formulaires devraient toujours fonctionner sans ajax.

À peu près la seule chose que les rappels #ajax devraient faire est de renvoyer la partie du formulaire qui doit être remplacée, selon l'encapsuleur défini.

Berdir
la source
2
Soyez prudent avec votre libellé. Le rappel doit renvoyer THE WHOLE FORM, reconstruit à partir de form_state. Renvoyer une partie du formulaire est la plus grande idée fausse Drupal / AHAH. Voir katbailey.net/blog/ahah-drupal-may-it-one-day-live-its-acronym .
7
Cette question concerne Drupal 7 ... AHAH n'existe plus dans Drupal. Dans une #ajaxfonction de rappel dans Drupal 7, vous renvoyez uniquement la partie du formulaire que vous souhaitez remplacer.
Clive
1
@ChrisD. Comme Clive l'a mentionné, il s'agit de Drupal 7 et nous avons maintenant un joli cadre ajax qui permet de faire toutes sortes de choses fantastiques comme le retour de plusieurs parties de formulaire séparées et ainsi de suite.
Berdir
@Clive Je suis tombé sur un autre problème lié à ajax drupal.stackexchange.com/a/142316/19205 où l'auteur a mentionné "le formulaire doit être reconstruit après la modification de items_count", qui est également pour d7. Je suis confus avec quelle affirmation est juste (sans discuter de qui a raison :-)). Pourriez-vous s'il vous plaît partager quelques informations à ce sujet?
kiranking le
0

Il y a deux façons

1)

function abc_form_validate(&$form, &$form_state) {
  // Validation logic - invalidate using form_set_error() or form_error()
}

function abc_form_ajax_handler(&$form, &$form_state) {
  return $form;
}

2) Exemple de module http://cgit.drupalcode.org/examples/tree/ajax_example/ajax_example.module?id=refs/heads;id2=7.x-1.x#l402

Drock
la source
Je ne sais pas maintenant à quel point votre réponse est précise, mais sa mise en forme doit certainement être améliorée (si vous ne voulez pas qu'elle soit supprimée par les modérateurs). Consultez la page d'aide si nécessaire, ou utilisez simplement certains des boutons de l'éditeur wysiwyg pour marquer au moins votre code comme ... code.
Pierre.Vriens
Un code mal formaté n'est pas une raison pour supprimer une réponse. Il suffit à un utilisateur disposant du privilège de modification de le corriger.
kiamlaluno
Ici, je viens, désespérée, à la recherche d'une solution, à peine 2 ans après cette réponse, j'ai cliqué sur un lien qui me mène à un arbre / branche inexistant. Veuillez ne pas utiliser de liens sur les réponses, ou si vous collez le contenu au moment de la rédaction.
MacK
0

Dans mon cas, l'utilisation d'un submittype faisait que le formulaire était toujours soumis, donc je l'ai changé en un buttonavec #ajaxspécifié. Ensuite, j'ai dû faire ma validation dans le rappel ajax.

Je faisais un volet ctools; Je ne sais pas si cela joue.

function mymodule_form($form, &$form_state) {
  ...
  $form['button'] = array(
    '#type' => 'button',
    '#value' => t('Subscribe'),
    '#ajax' => array(
      'callback' => '_mymodule_ajax',
    ),
  );
  return $form;
}

function _mymodule_ajax($form, &$form_state) {
  if ( ! valid_email_address($form_state['values']['email']) ) {
    form_set_error($form, t('Please enter a valid email address.'));
  } else {
    $form = array(
      '#markup' => t('You have subscribed.'),
    );
  }
  return $form;
}
user1359
la source