Como validar e enviar um formulário usando o AJAX?


12

Eu criei um formulário da web usando a API do formulário. Estou usando a #AJAXopção de campo para adicionar a validação AJAX a cada campo.

É possível validar e enviar o formulário usando o AJAX sem recarregar a página. Se a validação falhar, quero mostrar uma mensagem de erro e se a validação for bem-sucedida, quero mostrar uma mensagem (de preferência em uma mesa de luz) e redefinir os campos do formulário.

Meu código até agora:

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

funções de retorno de chamada são assim:

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

Mas não tenho certeza do que deve ser _handle_form_submitválido na função para validar e, em seguida, retornar uma mensagem ou enviar um formulário e redefinir os campos?

Respostas:


-2

O módulo de exemplos possui um formulário ajax ao qual você pode se referir, bem como muitos outros. Aqui está um link para o exemplo de formulário ajax no repositório de códigos, mas sugiro fazer o download para verificar a implementação de qualquer maneira.


1
sorry - eu não consigo encontrar qualquer exemplos de validataion ajaxy no módulo exemplo
ErichBSchulz

Sim, essa é uma resposta inchada. Na verdade, também não vejo validação. Cada retorno de chamada simplesmente retorna o formulário.
AlxVallejo

2
Como é essa a resposta aceita? Nem sequer diz onde procurar no link fornecido (e o link não tem um exemplo de validação).
robinmitra

Novo link para o exemplo de formulário ajax: cgit.drupalcode.org/examples/tree/ajax_example/…
Brentg 28/17

Eu fiz a minha resposta um wiki, uma vez que é aceito, mas de má qualidade
rocketeerbkw

11

Sei que essa pergunta existe há alguns anos, mas não sinto que nenhuma das outras respostas realmente entenda o envio do formulário do Drupal 7 ajax, por isso vou tentar explicá-lo.

Como seu formulário deve funcionar tão bem sem o ajax, conforme as boas práticas, o manipulador de envio do ajax não deve fazer nada além de retornar o formulário. Todo o resto deve estar na sua validação e enviar funções.

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

provavelmente Melhor resposta
Andrew Kozoriz 04/01

Você está dizendo que os métodos de validação e envio serão chamados automaticamente para um retorno de chamada AJAX em um botão de envio? Em que ordem os métodos são chamados?
21418 Jeff

3

Acho que o post de maxtorete em 17 de outubro de 2011 parece dar um exemplo mais completo usando ambos form_validate()eform_submit()

(Ainda não testei.)

Também a resposta de Joshua Stewardson no estouro de pilha tem um bom exemplo de trabalho:

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 enfatiza que as mensagens de erro de validação substituem o #ajax['wrapper']elemento completamente, para que seu retorno de chamada precise reabastecer esse elemento novamente à medida que você o substitui.


quando esse link invalida, é sinal de que a pergunta não é mais relevante!
precisa saber é o seguinte

2
voto negativo é um pouco duro - mesmo que fosse apenas um link - era um link para a resposta - não apenas um link para um módulo que não tem a resposta - ao contrário da resposta aceita !! de qualquer maneira, eu forneci algum código de trabalho enquanto estava sendo votado.
ErichBSchulz

obrigado @ mbomb007 - corrigido agora
ErichBSchulz 25/04/19

2

Em geral, a validação e o tratamento de envio de formulários devem ocorrer nos retornos de chamada habituais _validate () e _submit (). A idéia é que os formulários ainda funcionem sem ajax.

A única coisa que os retornos de chamada #ajax devem fazer é retornar a parte do formulário que deve ser substituída, de acordo com o wrapper definido.


2
Tenha cuidado com sua redação. O retorno de chamada deve retornar TODO O FORMULÁRIO, reconstruído a partir do formulário_estado. Retornar PART do formulário é o maior equívoco do Drupal / AHAH. Consulte katbailey.net/blog/ahah-drupal-may-it-one-day-live-its-acronym .

7
Esta pergunta é sobre o Drupal 7 ... AHAH não existe mais no Drupal. Em uma #ajaxfunção de retorno de chamada no Drupal 7, você retorna apenas a parte do formulário que deseja substituir.
Clive

1
@ChrisD. Como Clive mencionou, este é o Drupal 7 e agora temos uma estrutura ajax bastante agradável, que permite fazer todo tipo de coisas sofisticadas, como retornar várias partes separadas do formulário e assim por diante.
Berdir

O @Clive me deparei com outro problema relacionado ao ajax, drupal.stackexchange.com/a/142316/19205, em que o autor mencionou "o formulário precisa ser compilado novamente após a alteração de items_count", que também é para d7. Estou confuso com qual afirmação está correta (sem discutir quem está certo :-)). Você poderia compartilhar algumas informações sobre isso?
precisa saber é o seguinte

0

Existem duas maneiras

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


Agora não sei quão precisa é sua resposta, mas a formatação definitivamente precisa ser aprimorada (se você não quiser que ela seja excluída por moderadores). Verifique a página de ajuda, se necessário, ou use apenas alguns dos botões do editor wysiwyg para marcar pelo menos o seu código como ... código.
Pierre.Vriens

O código formatado incorretamente não é um motivo para excluir uma resposta. Requer apenas um usuário com privilégio de edição para corrigi-lo.
kiamlaluno

Aqui estou, desesperado, procurando uma solução, apenas 2 anos após essa resposta, clicou em um link que me leva a uma árvore / galho inexistente. Por favor, não use links nas respostas, ou se você colar o conteúdo no momento da redação.
MacK 25/09

0

No meu caso, o uso de um submittipo fazia com que o formulário sempre fosse enviado, por isso mudei para um buttoncom #ajaxespecificado. Então, tive que fazer minha validação no retorno de chamada do ajax.

Eu estava fazendo um painel de cadeiras; Não sei se isso funciona.

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;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.