Как проверить и отправить форму, используя AJAX?


12

Я создал веб-форму, используя API формы. Я использую #AJAXопцию поля, чтобы добавить проверку AJAX для каждого поля.

Можно ли проверить и отправить форму с помощью AJAX без перезагрузки страницы. Если проверка не удалась, я хочу показать сообщение об ошибке, и если проверка прошла успешно, я хочу показать сообщение (в идеале в лайтбоксе) и сбросить поля формы.

Мой код до сих пор:

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

Функции обратного вызова выглядят так:

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

Но я не уверен, что должно идти в _handle_form_submitфункцию для проверки, а затем либо вернуть сообщение или отправить форму и сбросить поля?

Ответы:


-2

Модуль examples имеет форму ajax, на которую вы можете ссылаться так же, как и на многие другие. Вот ссылка на пример формы ajax в репозитории кода, но я все равно предлагаю скачать, чтобы посмотреть на реализацию самостоятельно.


1
извините - я не могу найти примеры валидации ajaxy в модуле примеров
ErichBSchulz

Да, это раздутый ответ прямо здесь. Я на самом деле не вижу никакой проверки там тоже. Каждый обратный вызов просто возвращает форму.
AlxVallejo

2
Как это принятый ответ? Он даже не говорит, где искать в предоставленной ссылке (и в любом случае ссылка не имеет пример проверки).
Робинмитра

Новая ссылка для примера формы ajax: cgit.drupalcode.org/examples/tree/ajax_example/…
Брентг

Я сделал свой ответ в вики, так как он принят, но плохого качества
rocketeerbkw

11

Я знаю, что этот вопрос лежит уже несколько лет, но я не чувствую, что другие ответы действительно дают смысл представления формы ajax в Drupal 7, поэтому я попытаюсь объяснить это.

Sinve ваша форма должна работать без ajax, в соответствии с хорошей практикой, ваш обработчик отправки ajax ничего не должен делать, кроме как вернуть форму. Все остальное должно быть в вашей проверке и отправке функций.

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

Вероятно, лучший ответ
Андрей Козориз

Вы хотите сказать, что методы проверки и отправки будут автоматически вызываться для обратного вызова AJAX на кнопке отправки? В каком порядке вызываются методы?
Джефф

3

Я думаю, что пост maxtorete от 17 октября 2011 года, кажется, дает более полный пример, используя form_validate()иform_submit()

(Я еще не проверял это.)

Также ответ Джошуа Стюардсона при переполнении стека имеет хороший рабочий пример:

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.');
}

Джошуа подчеркивает, что сообщения об ошибках валидации #ajax['wrapper']полностью заменяют элемент, поэтому ваш обратный вызов должен снова пополнить этот элемент при его замене.


когда эта ссылка недействительна, это знак, что вопрос больше не актуален!
ErichBSchulz

2
голосование с отрицательным результатом является довольно резким - даже если это была всего лишь ссылка - это была ссылка на ответ, а не просто ссылка на модуль, у которого нет ответа - в отличие от принятого ответа !! во всяком случае, я предоставил некоторый рабочий код, пока меня голосовали.
ErichBSchulz

спасибо @ mbomb007 - исправлено сейчас
ErichBSchulz

2

В общем, проверка и обработка отправки формы должны происходить в обычных обратных вызовах _validate () и _submit (). Идея состоит в том, что формы все еще должны работать без ajax.

Практически единственное, что должны делать обратные вызовы #ajax, это возвращать часть формы, которая должна быть заменена, в соответствии с определенной оболочкой.


2
Будьте осторожны с вашей формулировкой. Обратный вызов должен возвращать ВЕСЬ ФОРМУ, перестроенный из form_state. Возвращение ЧАСТИ формы - самое большое заблуждение Drupal / AHAH. См. Katbailey.net/blog/ahah-drupal-may-it-one-day-live-its-acronym .

7
Этот вопрос о Drupal 7 ... AHAH больше не существует в Drupal. В #ajaxфункции обратного вызова в Drupal 7 вы возвращаете только ту часть формы, которую хотите заменить.
Клайв

1
@ChrisD. Как уже упоминал Клайв, это Drupal 7, и теперь у нас есть довольно приятный фреймворк Ajax, который позволяет выполнять всевозможные модные вещи, такие как возврат нескольких отдельных частей формы и так далее.
Бердир

@Clive Я столкнулся с еще одной проблемой, связанной с ajax: drupal.stackexchange.com/a/142316/19205, где автор упомянул: «необходимо изменить форму после изменения items_count», что также относится к d7. Меня смущает, какое утверждение является правильным (не споря, кто прав :-)). Не могли бы вы поделиться информацией об этом?
kiranking

0

Есть два способа

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) Пример модуля http://cgit.drupalcode.org/examples/tree/ajax_example/ajax_example.module?id=refs/heads;id2=7.x-1.x#l402


Я не знаю, насколько точен ваш ответ, но его форматирование, безусловно, нуждается в улучшении (если вы не хотите, чтобы его удаляли модераторы). Проверьте страницу справки, если необходимо, или просто используйте некоторые из кнопок редактора wysiwyg, чтобы хотя бы пометить ваш код как ... код.
Pierre.Vriens

Неправильно отформатированный код не является причиной для удаления ответа. Это просто требует пользователя с правами редактирования, чтобы исправить это.
kiamlaluno

Вот и я, отчаявшись, в поисках решения, всего через 2 года после этого ответа, щелкнул ссылку, которая приводит меня к несуществующему дереву / ветви. Пожалуйста, не используйте ссылки в ответах, или если вы вставляете контент во время написания.
Мак

0

В моем случае использование submitтипа приводило к тому, что форма всегда отправлялась, поэтому я изменил ее на buttonс #ajaxуказанным. Затем я должен был выполнить проверку в обратном вызове Ajax.

Я делал панель ctools; Я не знаю, играет ли это на этом.

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;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.