Проверка формы AJAX и отправка

Этот вопрос и ответ помогли мне найти правильное решение, но оно не совсем кристально ясное. Сделаем так.

О чем нужно очень знать:

1. Сообщения об ошибках проверки будут помещены внутрь всего, что указано как #ajax['wrapper']
2. Обратите особое внимание на то, где находится документация по Drupal Forms API для ajax. обертка говорит, что "заменяется весь элемент с этим идентификатором, а не только содержимое элемента".
3. Поскольку этот элемент заменяется, вам лучше предоставить его снова. Вот вот почему ответ Мариуса Илие работает - не из-за массива и #markup, а потому, что он включает div с установленным идентификатором оболочки.

Вот код, который работал у меня на основе того, что Мариус написал в комментарии выше:

function dr_search_test_form($form, &$fstate) {
  $form["wrapper"] = array("#markup" => "<div id='test-ajax'></div>");

  $form["name"] = array(
    "#type" => "textfield",
    "#required" => true,
    "#title" => "Name"
  );

  $form["submit"] = array(
    "#type" => "submit",
    "#value" => t("Send"),
    "#ajax" => array(
      "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.");
}

Я нашел отличное решение этой проблемы.

Кредит идет в блог этого парня:

http://saw.tl/validate-form-ajax-submit-callback

Решение, которое он предлагает, следующее:

// when creating or altering the form..
{
  $form['#prefix'] = '<div id="formwrapper">';
  $form['#suffix'] = '</div>';
  // the submit button
  $form['save']['#ajax'] = array(
    'callback' => 'mymodule_form_ajax_submit',
    'wrapper' => 'formwrapper',
    'method' => 'replace',
    'effect' => 'fade',
  );
 // ...
}

function mymodule_from_ajax_submit($form, &$form_state) {
  // validate the form
  drupal_validate_form('mymodule_form_id', $form, $form_state);
  // if there are errors, return the form to display the error messages
  if (form_get_errors()) {
    $form_state['rebuild'] = TRUE;
    return $form;
  }
  // process the form
  mymodule_form_id_submit($form, $form_state);
  $output = array(
    '#markup' => 'Form submitted.'
  );
  // return the confirmation message
  return $output;
}

Ничего из этого не работает для меня. Функция ajax отправки формы по-прежнему просто вызывает функцию обратного вызова напрямую, минуя проверку, отправку, а также делая так, чтобы кнопка не могла быть нажата несколько раз. Сообщения проверки НЕ отображаются. Я буквально скопировал и вставил код Джошуа Стюардсона, и это не сработало.

Тот факт, что этот вариант использования такой сложный и недокументированный, очень расстраивает. Мне кажется, что это самый простой запрос на API формы AJAX. Хорошо, я закончил изливать свое разочарование на решение.

Вот что я сделал, чтобы заставить это работать. Он чувствует себя хакерским и отсталым. Он также сломается, если на одной странице будет несколько экземпляров формы, но это было лучшее, что я мог сделать. Если кто-то может пролить свет на это, ПОЖАЛУЙСТА!

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

function productsearchbar_savesearch_form($form, &$form_state) {

  $form["wrapper"] = array("#markup" => "<div class='inline-messages'></div>");

  $form["name"] = array(
    "#type" => "textfield", 
    "#required" => true,
    "#title" => "Name"
  );

  $form["submit"] = array(
    "#type" => "submit", 
    "#value" => "Send", 
    "#ajax" => array(
      "callback" => "productsearchbar_savesearch_form_callback", 
      "wrapper" => "productsearchbar-savesearch-form", 
      "effect" => "fade"
    )
  );

  return $form;
}

function productsearchbar_savesearch_form_callback($form, &$form_state) {
  $messages = theme('status_messages');

  if($messages){
    $form["wrapper"] = array("#markup" => "<div class='inline-messages'>$messages</div>");
  }
  return $form;
}

function productsearchbar_savesearch_form_validate($form, &$form_state) {
  if ($form_state['values']['name'] == '') {
   form_set_error('', t('Name field is empty!'));
  }
}

function productsearchbar_savesearch_form_submit($form, &$form_state) {
  drupal_set_message(t('Your form has been saved.'));
}

Хорошо, я разбираюсь. По-видимому, вы должны вернуть массив в свою функцию обратного вызова ajax, а не только текстовое сообщение...

Что-то вроде этого:

return array("#markup" => "<div id='wrapper'></div>");

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

Используйте методы проверки jquery для запуска события ajax с помощью триггера javascript:

// Prevent form submission when there are client-side errors, trigger ajax event when it is valid
(function ($) {
    Drupal.behaviors.submitForm = { 
        attach: function (context) {
            var $form = $("form#validated_form", context);
            var $submitButton = $('input[type="submit"]', $form);

            $form
                .once('submitForm')
                .off('submit')
                .on('submit', function(e){

                    // Prevent normal form submission
                    e.preventDefault();
                    var $form = $(this);

                    // The trigger value should match what you have in your $form['submit'] array's ajax array
                    //if the form is valid, trigger the ajax event
                    if($form.valid()) {
                        $submitButton.trigger('submit_form');
                    }
            });

        }
    };
})(jQuery);

Ссылайтесь на триггер javascript как на прослушиваемое событие ajax:

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
    '#ajax' => array(
      'event' => 'submit_form',
      'callback' => 'callback_function_for_when_form_is_valid',
      'wrapper' => 'validated_form'
    )
);

Теперь проверка запускается, как только нажимается кнопка отправки, а проверка на стороне сервера происходит только тогда, когда она действительна!

//вы можете использовать проверку формы jquery

jQuery('#button-id').mousedown(function() {
  var textval = $("#get-text-val").val();
  if (textval == '') {
    $("#apend-error-msg").append('<div id="add-text-error" class="add-text-error">error msg</div>');
   return false;
  }
  else {
    return true;
  }
  return false;
 });