จะตรวจสอบและส่งแบบฟอร์มโดยใช้ AJAX ได้อย่างไร

ฉันสร้างฟอร์มเว็บโดยใช้ Form API ฉันใช้#AJAXตัวเลือกฟิลด์เพื่อเพิ่มการตรวจสอบ AJAX ให้กับแต่ละฟิลด์

เป็นไปได้หรือไม่ที่จะตรวจสอบและส่งแบบฟอร์มโดยใช้ AJAX โดยไม่ต้องโหลดหน้าซ้ำ หากการตรวจสอบล้มเหลวฉันต้องการแสดงข้อความแสดงข้อผิดพลาดและหากการตรวจสอบสำเร็จแล้วฉันต้องการแสดงข้อความ (นึกคิดใน lightbox) และตั้งค่าเขตข้อมูลแบบฟอร์ม

รหัสของฉัน:

$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ฟังก์ชั่นการตรวจสอบแล้วส่งคืนข้อความหรือส่งแบบฟอร์มและเขตข้อมูลรีเซ็ต?

โมดูลตัวอย่างมีรูปแบบที่อาแจ็กซ์ที่คุณสามารถดูได้เช่นเดียวกับคนอื่น ๆ นี่คือลิงค์ไปยังตัวอย่างแบบฟอร์ม ajaxในที่เก็บรหัส แต่ฉันขอแนะนำให้ดาวน์โหลดเพื่อดูการใช้งานด้วยตนเองต่อไป

ฉันรู้ว่านี่เป็นคำถามที่ตั้งคำถามกันมาสองสามปีแล้ว แต่ฉันไม่รู้สึกว่าคำตอบอื่น ๆ จะได้รับการตอบแบบฟอร์ม Drupal 7 ajax ดังนั้นฉันจะพยายามอธิบาย

บาปแบบฟอร์มของคุณควรทำงานได้ดีโดยไม่ต้อง ajax ตามหลักปฏิบัติที่ดี ajax submit handler ไม่ควรทำอะไรเลยนอกจากส่งแบบฟอร์มกลับมา ทุกอย่างอื่นควรอยู่ในการตรวจสอบและส่งฟังก์ชั่นของคุณ

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

ฉันคิดว่าโพสต์โดย maxtorete เมื่อวันที่ 17 ตุลาคม 2011ดูเหมือนจะให้ตัวอย่างที่สมบูรณ์ยิ่งขึ้นโดยใช้ทั้งสองform_validate()และform_submit()

(ฉันยังไม่ได้ทดสอบเลย)

นอกจากนี้คำตอบของ Joshua Stewardson ที่overflow ของ stackมีตัวอย่างการทำงานที่ดี:

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']องค์ประกอบทั้งหมดดังนั้นการติดต่อกลับของคุณจำเป็นต้องจัดหาองค์ประกอบนี้อีกครั้งในขณะที่คุณแทนที่

โดยทั่วไปการจัดการการตรวจสอบความถูกต้องและการส่งแบบฟอร์มควรเกิดขึ้นในการเรียกกลับ _validate () และ _submit () ตามปกติ แนวคิดก็คือรูปแบบควรยังคงทำงานได้โดยไม่ต้อง ajax

สวยมากสิ่งเดียวที่ #ajax callbacks ควรทำคือคืนส่วนของแบบฟอร์มที่ควรถูกแทนที่ตาม wrapper ที่กำหนด

มีสองวิธี

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

ในกรณีของฉันโดยใช้submitชนิดที่เกิดจากรูปแบบที่มักจะส่งดังนั้นฉันเปลี่ยนมันไปbuttonกับ#ajaxที่ระบุไว้ จากนั้นฉันต้องทำการตรวจสอบความถูกต้องของฉันในการโทรกลับ ajax

ฉันกำลังทำบานหน้าต่าง ctools; ฉันไม่รู้ว่ามันเล่นหรือเปล่า

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