Form Ajax submission: erratic behavior

Question

I'm experiencing a weird behavior with an ajax form submit that I cannot find an answer to.

This is my first attempt at making an ajax form so bear with me if I'm making a rookie mistake somewhere.

namespace Drupal\MYMODULE\Forms;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;



class InputForm extends FormBase {

  public function getFormID() {
    return 'authForm';
  }
  /**
   * Implements \Drupal\Core\Form\FormInterface::buildForm().
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    $form['#prefix'] = '<div id="testdiv"></div>';

    $form['key'] = array(
        '#type' => 'textfield',
        '#title' => t('Key'),
        '#size' => 10,
        '#name' => 'key',
        '#required' => TRUE,
        '#attributes' => ['id'=>'key','name'=>'key','class'=>array('input-sm')]
    );

    $form['code'] = array(
        '#type' => 'textfield',
        '#title' => t('code'),
        '#name' => 'code',
        '#required' => TRUE,
        '#attributes' => ['id'=>'code','name'=>'code','class'=>array('input-sm')]
    );

    $form['form_submit'] = array(
        '#type' => 'submit',
        '#value' => t('submit'),
        '#name' => 'submit',
        '#ajax' => [
            'callback' => '::test',
            'prevent' => 'submit',
            'progress' => []
        ]
    );
    return $form;
  }
  public function validateForm(array &$form, FormStateInterface $form_state) {


      if (strlen($form_state->getValue('key')) < 10) {
        $form_state->setErrorByName('key', $this->t('Key is too short'));
      }


  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    // Handle submitted form data.
  }


  public function test(array &$form, FormStateInterface $form_state) {
    if($form_state->hasAnyErrors()) {
        $form_state->setRebuild(TRUE);

        return($form);
    } 

    $response = new AjaxResponse();
    $response->addCommand(
        new HtmlCommand(
            '#testdiv',
            '<p>HELLO</p>'
        )
    );
    return $response;

  }


}

So the erratic behavior is in the validation of the form. What is happening is when I click the submit button (with no values in the input fields) the ajax fires and through var dumping I know the $form_state->hasAnyErrors() returns true but the form rebuild that is returned is not modifying the form highlighting the fields with errors as expected.

So after spending a couple hours trying to sort out this issue I got frustrated and mashed the submit button over and over again in a rage and low and behold it did what it's supposed to do after about eight clicks.

So then I tried to narrow down how many times it would take hitting the button before it would work correctly and it would always happen at random clicks. Sometimes after 2, sometimes after 3... sometimes after 10.

I'm stumped as to why it doesn't happen each and every single time the button is clicked rebuilding the form properly with errors.

Of Note:

• Have tried removing the prevent key
• Have tried with Bartik theme with same results
• Have tried setting an ID on the submit button but then ajax doesn't fire
• Have confirmed that the form does have errors
• Have input values into the fields (key value shorter than 10) and the same behavior happens in the validateForm() function

If anyone could point me to what I could be doing wrong I'd very much appreciate it. Thanks in advance!

Edit for visual example: Gif showing behavior

Answer 1

What you can see in the Gif looks more like the validation of the form in javascript not in ajax.

Normally you decide in the submit button by including the option 'wrapper' => 'ajax-wrapper-id', if you want to use the wrapper method and return in the ajax callback the new version of the form or parts of it, or use the response method and build an ajax response in the callback. Doubt that you can mix it like this.

If you use the wrapper method you don't need to rebuild the form, because it is already rebuilt, when it reaches the ajax callback.

Answer 2

HTML 5 Validation

THIS is the validation that is showing up in the gif. For whatever reason, when doing the ajax call it (HTML5 Validation) would sometimes fire and sometimes not.

My personal solution: Disable HTML5 clientside validation and handle that myself.

$form['#attributes']['novalidate'] = 'novalidate';

Hopefully this helps some future reader.