it-swarm.com.de

Wie kann ich ein Formular mit AJAX validieren und abschicken?

Ich habe ein Webformular mit der Formular-API erstellt. Ich verwende die Feldoption #AJAX, 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 und wenn die Validierung erfolgreich ist, möchte ich eine Nachricht anzeigen (idealerweise in einen Leuchtkasten) und setzen Sie die Formularfelder zurück.

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

Aber ich bin nicht sicher, was in der Funktion _handle_form_submit Gehen soll, um zu validieren und dann entweder eine Nachricht zurückzugeben oder ein Formular zu senden und Felder zurückzusetzen?

12
Camsoft

Ich weiß, dass diese Frage schon seit ein paar Jahren herumliegt, aber ich glaube nicht, dass eine der anderen Antworten wirklich den Sinn hat, Drupal 7 Ajax-Formular einzureichen, also ich Ich werde 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;
}
11
OWast

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

(Ich habe es noch nicht getestet.)

Auch Joshua Stewardsons Antwort bei Stapelüberlauf hat ein gutes Arbeitsbeispiel:

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 Element #ajax['wrapper'] Vollständig ersetzen, sodass Ihr Rückruf dieses Element erneut ersetzen muss, wenn Sie es ersetzen.

3
ErichBSchulz

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.

2
Berdir

In meinem Fall hat die Verwendung eines submit -Typs dazu geführt, dass das Formular immer gesendet wurde. Daher habe ich es in ein button geändert, wobei #ajax Angegeben wurde. 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;
}
0
user1359

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

0
Drock