title: Drupal - Ajax validation only works when I am connected
body: <p>I am new in Drupal world and I'm trying to use the <strong>Drupal From API</strong> to create a contact form with <strong>Ajax validation</strong>.</p>
  
  <p>I'm facing 2 issues:</p>
  
  <ul>
  <li><p>My following form (see below) works well but only when the user is connected as administrator. When I am not logged in as an administrator, it does not work.</p></li>
  <li><p>I also created a custom Block to display my Form, unfortunately the block does not appear when I am logged in.</p></li>
  </ul>
  
  <p>I try to follow this guide whitout success: <a href="https://panshul1410.blog/2018/07/15/drupal-8-ajax-validations-for-custom-form/" rel="nofollow noreferrer">https://panshul1410.blog/2018/07/15/drupal-8-ajax-validations-for-custom-form/</a></p>
  
  <p>Here is the form I created:</p>
  
  <pre><code>&lt;?php
  
  namespace Drupal\dalcom_contact\Form;
  
  use Drupal\Core\Ajax\AjaxResponse;
  use Drupal\Core\Ajax\HtmlCommand;
  use Drupal\Core\Ajax\InvokeCommand;
  use Drupal\Core\Form\FormBase;
  use Drupal\Core\Form\FormStateInterface;
  
  class DalcomContactForm extends FormBase {
  
    /**
     * {@inheritdoc}
     */
    public function getFormId() {
      return 'dlcm_cform';
    }
  
    public function buildForm(array $form, FormStateInterface $form_state, $params = NULL) {
  
      // Disable caching.
      $form['#cache']['max-age'] = 0;
  
      // Disable browser HTML5 validation.
      $form['#attributes']['novalidate'] = 'novalidate';
  
      // This will generate an anchor scroll to the form when submitting.
      $form['#action'] = '#dlcm_cform';
  
      $form['mail_visitor'] = [
        '#type' =&gt; 'email',
        '#placeholder' =&gt; t('E-mail*'),
        '#description' =&gt; 'Your mail',
        '#required' =&gt; TRUE,
        '#ajax' =&gt; [
          'callback' =&gt; 'Drupal\dalcom_contact\Form\DalcomContactForm::mailValidateCallback',
          'effect' =&gt; 'fade',
          'event' =&gt; 'change',
          'progress' =&gt; [
            'type' =&gt; 'throbber',
            'message' =&gt; NULL,
          ],
        ],
      ];
  
      $form['message_visitor'] = [
        '#type' =&gt; 'textarea',
        '#placeholder' =&gt; t('Message*'),
        '#description' =&gt; 'Your message',
        '#required' =&gt; TRUE,
        '#ajax' =&gt; [
          'callback' =&gt; 'Drupal\dalcom_contact\Form\DalcomContactForm::messValidateCallback',
          'effect' =&gt; 'fade',
          'event' =&gt; 'change',
          'progress' =&gt; [
            'type' =&gt; 'throbber',
            'message' =&gt; NULL,
          ],
        ],
      ];
  
      $form['accept_box'] = [
        '#type' =&gt; 'checkbox',
        '#title' =&gt; $this
          -&gt;t('I accept the CME terms of use'),
        '#required' =&gt; TRUE,
        '#ajax' =&gt; [
          'callback' =&gt; 'Drupal\dalcom_contact\Form\DalcomContactForm::acceptboxalidateCallback',
          'effect' =&gt; 'fade',
          'event' =&gt; 'change',
          'progress' =&gt; [
            'type' =&gt; 'throbber',
            'message' =&gt; NULL,
          ],
        ],
      ];
  
      $form['candidate_copy'] = [
        '#type' =&gt; 'checkbox',
        '#title' =&gt; t('Send me a copy of my message.'),
      ];
  
      $form['actions']['#type'] = 'actions';
  
      $form['actions']['submit'] = [
        '#type' =&gt; 'button',
        '#value' =&gt; $this-&gt;t('Send'),
        '#ajax' =&gt; [
          'event' =&gt; 'click',
          'progress' =&gt; [
            'type' =&gt; 'throbber',
            'message' =&gt; 'Sending...',
          ],
  
        ],
      ];
  
      $form['#theme'] = 'dalcom_contact_theme';
  
      return $form;
    }
  
    public function submitForm(array &amp;$form, FormStateInterface $form_state) {
      foreach ($form_state-&gt;getValues() as $key =&gt; $value) {
        drupal_set_message($key . ': ' . $value);
      }
    }
  
    public function mailValidateCallback(array &amp;$form, FormStateInterface $form_state) {
      $ajax_response = new AjaxResponse();
  
      if (!$form_state-&gt;getValue('mail_visitor') || empty($form_state-&gt;getValue('mail_visitor'))) {
        $text = 'No email registered';
        $color = 'red';
      }
      elseif (!filter_var($form_state-&gt;getValue('mail_visitor'), FILTER_VALIDATE_EMAIL)) {
        $text = 'Invalid email address';
        $color = 'red';
      }
      else {
        $text = 'Valid mail';
        $color = 'green';
      }
  
      $ajax_response-&gt;addCommand(new HtmlCommand('#edit-mail-visitor--description', $text));
  
      $ajax_response-&gt;addCommand(new InvokeCommand('#edit-mail-visitor--description', 'css', ['color', $color]));
  
      return $ajax_response;
    }
  
    public function messValidateCallback(array &amp;$form, FormStateInterface $form_state) {
      $ajax_response = new AjaxResponse();
  
      if (!$form_state-&gt;getValue('message_visitor') || empty($form_state-&gt;getValue('message_visitor'))) {
        $text = 'No messages written';
        $color = 'red';
      }
      elseif (strlen($form_state-&gt;getValue('message_visitor')) &lt; 6) {
        $text = 'At least 7 characters';
        $color = 'red';
      }
      else {
        $text = 'Messages written';
        $color = 'green';
      }
  
      $ajax_response-&gt;addCommand(new HtmlCommand('#edit-message-visitor--description', $text));
  
      $ajax_response-&gt;addCommand(new InvokeCommand('#edit-message-visitor--description', 'css', ['color', $color]));
  
      return $ajax_response;
    }
  
    public function acceptboxValidateCallback(array &amp;$form, FormStateInterface $form_state) {
      $ajax_response = new AjaxResponse();
  
      if (empty($form_state-&gt;getValue('accept-box'))) {
        $text = 'You must accept our termes of use to continue';
        $color = 'red';
      }
  
      $ajax_response-&gt;addCommand(new HtmlCommand('#edit-accept-box--description', $text));
  
      $ajax_response-&gt;addCommand(new InvokeCommand('#edit-accept-box--description', 'css', ['color', $color]));
  
      return $ajax_response;
    }
  
  }
  </code></pre>
  
  <p>It works very well. But Ajax validation only works when I am connected. When I am not logged in as an administrator, it does not work.</p>
  
  <p>Here is the block to display the form in my footer. </p>
  
  <pre><code>&lt;?php
  
  namespace Drupal\dalcom_contact_block\Plugin\Block;
  
  use Drupal\Core\Block\BlockBase;
  use Drupal\Core\Form\FormInterface;
  
  /**
   * Provides a 'dalcom contact' block.
   *
   * @Block(
   *   id = "dalcom_contact_block",
   *   admin_label = @Translation("Dalcom Contact Block"),
   *   category = @Translation("Block du formulaire Dalcom Contact")
   * )
   */
  class DalcomContactBlock extends BlockBase {
  
    /**
     * {@inheritdoc}
     */
    public function build() {
      $form = \Drupal::formBuilder()-&gt;getForm('\Drupal\dalcom_contact\Form\DalcomContactForm');
      return $form;
    }
  }
  </code></pre>
  
  <p>As explain upper, the block does not appear when I am logged in. I have access to the form only through the path I defined in <code>module.routing.yml</code>. And when it appears (so when I'm not logged in), <em>Ajax</em> doesn't work on this block form either.</p>
  
  <p>Does anyone have any idea what could cause this?
  Please help me.</p>
  
  <p><strong>Edited:</strong></p>
  
  <p>Here is the <code>module.routing.yml</code> file</p>
  
  <pre><code>dalcom_contact.form:
    path: '/contact-us.html'
    defaults:
      _title: 'Contact Us'
      _form: 'Drupal\dalcom_contact\Form\DalcomContactForm'
    requirements:
      _permission: 'access content'
  </code></pre>
  
  <p>block.info.yml    </p>
  
  <pre><code>name: Dalcom Contact Block
  type: module
  description: Block du formulaire Dalcom Contact.
  core: 8.x
  package: Custom
  dependencies:
  - node
  - block
  </code></pre>
  
  <p><strong>Updated:</strong></p>
  
  <p>I notice that when the form does not appear (when I am connected), it appears in its place </p>
  
  <pre><code> &lt;span data-big-pipe-placeholder-id="…"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I've done some research on this, but I can't get out of it. Maybe this will help you to know what's going on.</p>