Làm cách nào để xác thực và gửi biểu mẫu bằng AJAX?

Tôi đã tạo một biểu mẫu web bằng API Mẫu. Tôi đang sử dụng #AJAXtùy chọn trường để thêm xác thực AJAX cho từng trường.

Có thể xác thực và gửi biểu mẫu bằng AJAX mà không cần tải lại trang. Nếu xác thực thất bại, tôi muốn hiển thị thông báo lỗi và nếu xác thực thành công thì tôi muốn hiển thị một thông báo (lý tưởng là trong hộp đèn) và đặt lại các trường mẫu.

Mã của tôi cho đến nay:

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

chức năng gọi lại trông như thế này:

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

Nhưng tôi không chắc chắn những gì cần có trong _handle_form_submitchức năng để xác thực và sau đó trả về một tin nhắn hoặc gửi biểu mẫu và đặt lại các trường?

Các mô-đun ví dụ có một hình thức ajax mà bạn có thể tham khảo cũng như nhiều người khác. Dưới đây là một liên kết đến ví dụ biểu mẫu ajax trong kho lưu trữ mã, nhưng tôi khuyên bạn nên tải xuống để tự mình xem xét việc thực hiện.

Tôi biết rằng đây là câu hỏi đã được đặt ra trong một vài năm nay, nhưng tôi không cảm thấy bất kỳ câu trả lời nào khác thực sự có ý nghĩa của việc nộp mẫu đơn aupax của Drupal 7, vì vậy tôi sẽ cố gắng giải thích nó.

Sinve biểu mẫu của bạn sẽ hoạt động tốt mà không có ajax vì theo thông lệ tốt, trình xử lý ajax của bạn sẽ không làm gì ngoài việc trả lại biểu mẫu. Mọi thứ khác nên có trong chức năng xác nhận và gửi của bạn.

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

Tôi nghĩ rằng bài đăng của maxtorete vào ngày 17 tháng 10 năm 2011 dường như đưa ra một ví dụ đầy đủ hơn bằng cách sử dụng cả hai form_validate()vàform_submit()

(Tôi chưa thử nó.)

Ngoài ra câu trả lời của Joshua Stewardson tại stack overflow có một ví dụ hoạt động tốt:

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 đưa ra quan điểm rằng các thông báo lỗi xác thực thay thế #ajax['wrapper']hoàn toàn phần tử để cuộc gọi lại của bạn cần cung cấp lại phần tử này khi bạn thay thế nó.

Nói chung, việc xác thực và xử lý gửi biểu mẫu nên diễn ra trong các cuộc gọi lại _validate () và _submit () thông thường. Ý tưởng là các hình thức vẫn nên hoạt động mà không có ajax.

Khá nhiều điều duy nhất mà các cuộc gọi lại #ajax nên làm là trả về phần của biểu mẫu cần được thay thế, theo trình bao bọc được xác định.

Có hai cách

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) Mô-đun ví dụ http://cgit.drupalcode.org/examples/tree/ajax_example/ajax_example.module?id=refs/heads;id2=7.x-1.x#l402

Trong trường hợp của tôi, việc sử dụng một submitloại khiến biểu mẫu luôn được gửi, vì vậy tôi đã thay đổi nó thành một buttonvới #ajaxchỉ định. Sau đó, tôi phải thực hiện xác nhận của mình trong cuộc gọi lại ajax.

Tôi đã làm một khung ctools; Tôi không biết nếu nó chơi vào nó.

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