如何使用AJAX验证和提交表单?


12

我已经使用Form API创建了一个Webform。我正在使用#AJAXfield选项将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函数应进行什么验证,然后返回消息或提交表单并重置字段?

Answers:


-2

实例模块有一个Ajax的形式,你可以参考,以及许多其他问题。这里是代码存储库中ajax表单示例的链接,但是我建议还是下载以自己查看实现。


1
抱歉-我无法在示例模块中找到任何有关ajaxy validateataion的示例
ErichBSchulz,2013年

是的,那是一个a肿的答案。我实际上也没有看到任何验证。每个回调仅返回表单。
AlxVallejo 2014年

2
这是如何被接受的答案?它甚至没有说要在提供的链接中查找位置(并且该链接无论如何都没有验证示例)。
robinmitra


我回答了一个wiki,因为它是可接受的,但是质量很差
rocketeerbkw

11

我知道这是一个已经存在了两年的问题,但是我认为其他任何答案都无法真正理解Drupal 7 ajax表单提交的意义,因此我将尽力对其进行解释。

保证您的表单在没有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;
}

可能是最佳答案
Andrew Kozoriz

您是说validate和Submit方法将自动通过Submit按钮调用AJAX回调吗?这些方法以什么顺序调用?
杰夫

3

我认为maxtorete在2011年10月17日发布的帖子似乎提供了同时使用form_validate()form_submit()

(我尚未测试过。)

同样,Joshua Stewardson在堆栈溢出时的回答也有一个很好的工作示例:

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指出,验证错误消息会#ajax['wrapper']完全替换该元素,因此,在您替换它时,回调函数需要再次重新提供该元素。


当该链接无效时,则表明该问题不再相关!
ErichBSchulz

2
拒绝投票有点苛刻-即使只是一个链接-它也是答案的链接-不仅仅是与没有答案的模块的链接-与公认的答案不同!无论如何,当我被选票时,我提供了一些工作代码。
ErichBSchulz 2013年

感谢@ mbomb007-立即修复
ErichBSchulz '19

2

通常,验证和表单提交处理应在通常的_validate()和_submit()回调中进行。这个想法是表格仍然可以在没有ajax的情况下工作。

根据定义的包装程序,#ajax回调几乎唯一要做的就是返回应替换的表单部分。


2
措辞要小心。回调应返回从form_state重建的WHOLE FORM。表格的返回部分是最大的Drupal / AHAH误解。参见katbailey.net/blog/ahah-drupal-may-it-day-live-its-acronym

7
这个问题是关于Drupal 7 ... AHAH不再存在于Drupal中。在#ajaxDrupal 7中的回调函数中,您仅返回要替换的表单部分。
克莱夫(Clive)

1
@ChrisD。正如Clive所提到的,这是Drupal 7,我们现在有一个很好的ajax框架,它可以执行各种奇特的工作,例如返回多个单独的表单部件等等。
Berdir 2012年

@Clive我遇到了另一个与Ajax相关的问题drupal.stackexchange.com/a/142316/19205,其中作者提到“在items_count更改后还需要重新构建表单”,这也适用于d7。我很困惑,哪个陈述是正确的(无需争论谁是正确的:-)。您能否分享一些信息?
排名

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


我现在不知道您的答案有多准确,但是它的格式肯定需要改进(如果您不希望主持人删除它)。如有必要,请查看帮助页面,或仅使用所见即所得的编辑器按钮至少将您的代码标记为...代码。
Pierre.Vriens,2015年

非正确格式的代码不是删除答案的原因。它只需要具有编辑权限的用户来修复它。
kiamlaluno

在此答案问世仅两年后,我拼命地寻找解决方案,单击了一个链接,该链接将我引导到一个不存在的树/分支。请不要在答案上使用链接,或者在撰写本文时粘贴内容。
MacK

0

就我而言,使用submit类型会导致表单始终提交,因此我将其更改为button带有#ajax指定的。然后,我必须在ajax回调中进行验证。

我正在制作一个凳子面板;我不知道这是否起作用。

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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.