Wie kann ich ein Formular mit AJAX validieren und abschicken?

Ich habe ein Webformular mit der Formular-API erstellt. Ich verwende die #AJAXFeldoption, um jedem Feld eine AJAX-Validierung hinzuzufügen.

Ist es möglich, das Formular mit AJAX zu validieren und zu senden, ohne die Seite neu zu laden? Wenn die Validierung fehlschlägt, möchte ich eine Fehlermeldung anzeigen. Wenn die Validierung erfolgreich ist, möchte ich eine Meldung anzeigen (idealerweise in einem Leuchtkasten) und die Formularfelder zurücksetzen.

Mein Code bisher:

$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',
    ),
);

Rückruffunktionen sehen folgendermaßen aus:

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) {
}

Ich bin mir jedoch nicht sicher, was in der _handle_form_submitFunktion zum Überprüfen und anschließenden Zurückgeben einer Nachricht oder zum Senden eines Formulars und zum Zurücksetzen von Feldern enthalten sein soll.

Das Beispielmodul verfügt über ein Ajax-Formular, auf das Sie und viele andere verweisen können. Hier ist ein Link zum Ajax-Formularbeispiel im Code-Repository, aber ich empfehle das Herunterladen, um die Implementierung trotzdem selbst anzusehen.

Ich weiß, dass diese Frage schon seit ein paar Jahren herumliegt, aber ich glaube nicht, dass eine der anderen Antworten wirklich den Sinn der Einreichung des Drupal 7 Ajax-Formulars hat, also werde ich versuchen, es zu erklären.

Da Ihr Formular auch ohne den Ajax funktionieren sollte, sollte Ihr Ajax-Submit-Handler nichts anderes tun, als das Formular zurückzugeben. Alles andere sollte in Ihrer Validierungs- und Übermittlungsfunktion enthalten sein.

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

Ich denke, der Beitrag von maxtorete am 17. Oktober 2011 scheint ein vollständigeres Beispiel zu geben, wenn sowohl form_validate()als auch verwendet werdenform_submit()

(Ich habe es noch nicht getestet.)

Auch Joshua Stewardsons Antwort beim Stapelüberlauf hat ein gutes Beispiel:

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 weist darauf hin, dass Validierungsfehlermeldungen das #ajax['wrapper']Element vollständig ersetzen, sodass Ihr Rückruf dieses Element erneut ersetzen muss, wenn Sie es ersetzen.

Im Allgemeinen sollten Validierung und Formularübermittlung in den üblichen Rückrufen _validate () und _submit () erfolgen. Die Idee ist, dass Formulare immer noch ohne Ajax funktionieren sollten.

Das einzige, was die #ajax-Rückrufe tun sollten, ist, den Teil des Formulars zurückzugeben, der gemäß dem definierten Wrapper ersetzt werden soll.

Es gibt zwei Möglichkeiten

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) Beispielmodul http://cgit.drupalcode.org/examples/tree/ajax_example/ajax_example.module?id=refs/heads;id2=7.x-1.x#l402

In meinem Fall führte die Verwendung eines submitTyps dazu, dass das Formular immer gesendet wurde, und ich änderte es in ein buttonmit #ajaxangegebenem. Dann musste ich meine Validierung im Ajax-Rückruf durchführen.

Ich machte eine Werkzeugscheibe; Ich weiß nicht, ob das dazu beiträgt.

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