Bagaimana cara memvalidasi dan mengirimkan formulir menggunakan AJAX?

Saya telah membuat formulir web menggunakan API Formulir. Saya menggunakan #AJAXopsi bidang untuk menambahkan validasi AJAX ke setiap bidang.

Apakah mungkin untuk memvalidasi dan mengirimkan formulir menggunakan AJAX tanpa memuat ulang halaman. Jika validasi gagal, saya ingin menampilkan pesan kesalahan dan jika validasi berhasil maka saya ingin menampilkan pesan (idealnya di lightbox) dan mengatur ulang bidang formulir.

Kode saya sejauh ini:

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

fungsi callback terlihat seperti ini:

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

Tapi saya tidak yakin apa yang harus _handle_form_submitberfungsi untuk memvalidasi dan kemudian mengembalikan pesan atau mengirim formulir dan mengatur ulang bidang?

The contoh modul memiliki bentuk ajax yang Anda dapat merujuk ke serta banyak lainnya. Berikut ini adalah tautan ke contoh formulir ajax dalam repositori kode, tetapi saya sarankan mengunduh untuk melihat implementasinya sendiri.

Saya tahu ini adalah pertanyaan yang sudah ada selama beberapa tahun sekarang, tetapi saya tidak merasa ada jawaban lain yang benar-benar mendapatkan poin dari pengajuan formulir Drupal 7 ajax, jadi saya akan mencoba menjelaskannya.

Karena formulir Anda harus bekerja dengan baik tanpa ajax sesuai praktik yang baik, penangan ajax Anda harus melakukan apa pun selain mengembalikan formulir. Segala sesuatu yang lain harus ada dalam validasi Anda dan mengirimkan fungsi.

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

Saya pikir posting oleh maxtorete pada 17 Oktober 2011 tampaknya memberikan contoh yang lebih lengkap menggunakan keduanya form_validate()danform_submit()

(Saya belum mengujinya.)

Juga jawaban Joshua Stewardson di stack overflow memiliki contoh kerja yang bagus:

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 menyatakan bahwa pesan kesalahan validasi menggantikan #ajax['wrapper']elemen sepenuhnya sehingga panggilan balik Anda perlu memasok kembali elemen ini saat Anda menggantinya.

Secara umum, validasi dan penanganan pengiriman formulir harus terjadi dalam panggilan balik _validate () dan _submit () yang biasa. Idenya adalah bahwa formulir harus tetap berfungsi tanpa ajax.

Cukup banyak satu-satunya hal yang harus dilakukan callback #ajax adalah mengembalikan bagian dari formulir yang harus diganti, menurut pembungkus yang ditentukan.

Ada dua cara

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) Modul contoh http://cgit.drupalcode.org/examples/tree/ajax_example/ajax_example.module?id=refs/heads;id2=7.x-1.x#l402

Dalam kasus saya, menggunakan submittipe menyebabkan formulir untuk selalu mengirimkan, jadi saya mengubahnya ke buttondengan yang #ajaxditentukan. Kemudian, saya harus melakukan validasi saya di ajax callback.

Saya membuat panel ctools; Saya tidak tahu apakah itu berperan di dalamnya.

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