web-dev-qa-db-fra.com

Comment valider et envoyer un formulaire avec AJAX?

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

Est-il possible de valider et d'envoyer 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 aller dans le _handle_form_submit fonction pour valider puis renvoyer un message ou envoyer un formulaire et réinitialiser les champs?

7formsajax
12
Camsoft

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

Sinve 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;
}
11
OWast

Je pense que le post de maxtorete le 17 octobre 2011 semble donner un exemple plus complet en utilisant à la fois form_validate() et form_submit()

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

La réponse de Joshua Stewardson à stack overflow 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 souligne que les messages d'erreur de validation remplacent le #ajax['wrapper'] élément complètement, donc votre rappel doit réapprovisionner cet élément à mesure que vous le remplacez.

3
ErichBSchulz

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.

2
Berdir

Dans mon cas, l'utilisation d'un type submit faisait que le formulaire était toujours soumis, donc je l'ai changé en button avec #ajax spé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;
}
0
user1359

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

0
Drock