Question

我在Drupal 7中创建了一个表单并希望使用AJAX。我将其添加到提交按钮数组：

"#ajax" => array(
  "callback" => "my_callback",
  "wrapper" => "details-container",
  "effect" => "fade"
)

这可以工作，但忽略整个验证功能。如何在调用my_callback()之前验证表单？如何在AJAX表单上显示状态或错误消息？

Answer 1

这个问题和答案有助于指导我找到正确的解决方案，但它并不十分清晰。让我们这样做。

非常意识到的事情：

验证错误消息将放置在指定为#ajax['wrapper']
密切注意Drupal Forms API documentation of the ajax wrapper所说的“具有此ID的整个元素被替换的位置，而不仅仅是元素的内容。”
因为替换了该元素，所以最好再次提供它。那是Marius Ilie回答的原因 - 不是因为数组和#markup，而是因为他将div包含在包装ID中。

根据Marius在上述评论中提出的内容，以下代码对我有用：

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

Answer 2

我找到了解决这个问题的绝佳方案。

归功于这家伙的博客：

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

Answer 3

这对我来说都不适用。表单提交的ajax函数仍然只是直接调用回调函数，绕过验证，提交，并使其无法多次单击按钮。验证消息不会显示。我完全复制并粘贴了Joshua Stewardson代码，但它没有用。

这个使用案例如此困难且没有文档的事实令人非常沮丧。对我来说，这似乎是对AJAX表单API的最基本的请求。好的，把我的挫折感发泄到解决方案上。

以下是我最终要做的工作。它感到hacky和迟钝。如果在单个页面上有多个表单实例，它也会中断，但这是我能做的最好的。如果有人能说明这一点请做！

基本上，您必须在回调中替换整个表单，并手动将任何设置的消息预先添加到表单对象。通过将包装器声明为表单的id来执行此操作（如果在单个页面上有多个表单实例，则会中断，因为ID将更新）。

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

Answer 4

好的，我明白了。显然你应该在你的ajax回调函数上返回一个数组，而不仅仅是一条短信......

这样的事情：

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

Answer 5

我搜索了很多时间才能找到正确的方法。不幸的是，大多数这些解决方案仍然依赖于Drupal的服务器端验证来确定是否应将ajax结果或客户端错误消息放在包装器中。依赖于服务器结果比客户端验证慢，这应该是几乎瞬时的。此外，将表单替换为带有错误消息的表单......对于我的偏好来说有点过于混乱。

使用jquery验证的方法通过javascript触发器触发ajax事件：

// 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'
    )
);

现在，只要单击提交按钮就会触发验证，服务器端验证只会在有效时发生！

Answer 6

//您可以使用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;
 });

AJAX表单验证并提交

6 个答案: