Comment valider et envoyer un formulaire avec AJAX?

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?

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.

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;
}

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.

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.

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

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;
}