AJAX를 사용하여 양식을 확인하고 제출하는 방법은 무엇입니까?


12

Form API를 사용하여 웹 양식을 만들었습니다. #AJAX필드 옵션을 사용하여 각 필드에 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유효성을 검사 한 다음 메시지를 반환하거나 양식을 제출하고 필드를 재설정하기 위해 어떤 기능을 수행 해야하는지 잘 모르겠습니다 .

답변:


-2

예 모듈은 당신은뿐만 아니라 많은 다른 사람으로 참조 할 수 아약스 양식을 가지고있다. 다음은 코드 리포지토리 의 ajax 양식 예제 에 대한 링크 이지만, 구현을 직접 확인하려면 다운로드하는 것이 좋습니다.


1
죄송합니다-예제 모듈에서 ajaxy validataion의 예를 찾을 수 없습니다
ErichBSchulz

그래, 그것은 바로 팽창 된 대답입니다. 실제로 거기에 대한 유효성 검사도 보이지 않습니다. 각 콜백은 단순히 양식을 반환합니다.
AlxVallejo

2
이것이 어떻게 받아 들여지는 답입니까? 제공된 링크에서 어디를 볼 것인지조차 말하지 않습니다 (그리고 링크에는 검증 예제가 없습니다).
robinmitra

아약스 양식 예제에 대한 새로운 링크 : cgit.drupalcode.org/examples/tree/ajax_example/…
Brentg

그것은 허용하지만 이후 나는 내 대답 위키를 만들어 품질이 좋지
rocketeerbkw

11

나는 이것이 2 년 동안 주변에 놓여있는 질문이라는 것을 알고 있지만 다른 답변 중 Drupal 7 아약스 양식 제출의 요점을 실제로 느끼지 못한다고 생각하므로 설명하려고합니다.

모범 사례에 따라 아약스없이 양식이 잘 작동해야하므로 아약스 제출 핸들러는 양식을 반환하는 것 외에는 아무것도하지 않아야합니다. 그 밖의 모든 것은 검증 및 제출 기능에 있어야합니다.

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

제출 버튼에서 AJAX 콜백에 대해 validate 및 submit 메소드가 자동으로 호출된다고 말하고 있습니까? 메소드는 어떤 순서로 호출됩니까?
Jeff

3

내가 생각하는 17 일 maxtorete에 의해 게시물 2011 사용 풀러 예제를 제공하는 것 모두 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
다운 투표는 약간 가혹합니다-링크 일지라도-답변에 대한 링크였습니다-대답이없는 모듈에 대한 링크가 아닙니다-허용 된 답변과 달리! 어쨌든 나는 downvoted되는 동안 작업 코드를 제공했습니다.
ErichBSchulz

고마워 @ mbomb007-지금 고쳐
ErichBSchulz

2

일반적으로 유효성 검사 및 양식 제출 처리는 일반적인 _validate () 및 _submit () 콜백에서 발생해야합니다. 아이디어는 양식이 여전히 아약스없이 작동해야한다는 것입니다.

#ajax 콜백이 수행해야 할 유일한 것은 정의 된 래퍼에 따라 교체해야하는 양식의 일부를 반환하는 것입니다.


2
말을 조심하십시오. 콜백은 form_state에서 재 빌드 된 THE WHOLE FORM을 리턴해야합니다. 양식의 일부를 반환하는 것이 가장 큰 Drupal / AHAH 오해입니다. katbailey.net/blog/ahah-drupal-may-it-one-day-live-its-acronym을 참조하십시오 .

7
이 질문은 Drupal 7에 관한 것입니다 ... AHAH는 더 이상 Drupal에 없습니다. #ajaxDrupal 7 의 콜백 함수에서는 교체하려는 양식의 일부만 반환합니다.
Clive

1
@ChrisD. Clive가 언급했듯이, 이것은 Drupal 7이며 여러 개의 개별 폼 파트를 반환하는 것과 같은 모든 종류의 멋진 작업을 수행 할 수있는 멋진 아약스 프레임 워크가 있습니다.
Berdir

@Clive 나는 또 다른 아약스 관련 문제 drupal.stackexchange.com/a/142316/19205를 발견했습니다 . 나는 어느 진술이 옳은지 혼란스러워합니다 (누가 옳은지 논쟁하지 않고). 이것에 대한 정보를 공유해 주시겠습니까?
kiranking

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


나는 당신의 대답이 얼마나 정확한지 모르겠지만, 그것의 형식은 분명히 개선이 필요합니다 (중재자가 그것을 지우고 싶지 않다면). 필요한 경우 도움말 페이지를 확인하거나 wysiwyg 편집기 버튼 중 일부를 사용하여 코드를 ... 코드로 표시하십시오.
Pierre.Vriens

올바르게 형식이 지정되지 않은 코드는 답변을 삭제하는 이유가 아닙니다. 수정하려면 편집 권한이있는 사용자 만 있으면됩니다.
kiamlaluno

나는이 답변 후 2 년 만에 해결책을 찾고 필사적으로 존재하지 않는 나무 / 가지로 연결되는 링크를 클릭했습니다. 답변에 링크를 사용하거나 글을 쓸 때 내용을 붙여 넣을 경우 링크를 사용하지 마십시오.
MacK

0

내 경우, 사용 submit나는 그것을 변경 그래서 형은, 형태는 항상 제출 발생 button으로 #ajax지정했습니다. 그런 다음 아약스 콜백에서 유효성 검사를 수행해야했습니다.

나는 ctools pane을 만들고 있었다; 그게 잘되는지 모르겠습니다.

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;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.