Custom form validation is missing I have a registration form :

&lt;div class="register-error" id="register-error"&gt;{{ form.status_messages_user_register_form }}&lt;/div&gt;

&lt;div class="row"&gt;

&lt;div class="col-sm-6"&gt;{{ form.field_first_name }}&lt;/div&gt;

&lt;div class="col-sm-6"&gt;{{ form.field_last_name }}&lt;/div&gt;&lt;/div&gt;

&lt;div class="clear"&gt;&lt;/div&gt;
{{ form.account.mail }}
{{ form.account.name }}
&lt;div class="row"&gt;
&lt;div class="col-sm-6"&gt;{{ form.account.pass.pass1 }}&lt;/div&gt;
&lt;div class="col-sm-6"&gt;{{ form.account.pass.pass2 }}&lt;/div&gt;&lt;/div&gt;
&lt;div class="clear"&gt;&lt;/div&gt;
{{ form.form_build_id }} {# required #}
{{ form.form_token }}{# required #}
{{ form.form_id }} {# required #}
{{ form.actions }}


Now i want to add custom validation for the registration.I have a custom ajax handler for registration using form alter:

$form['actions']['submit']['#ajax']  = [
         'callback'    =&gt; 'custom_register_form_ajax_validate',
         'event'       =&gt; 'click',
         '#attributes' =&gt; [
           'class' =&gt; [
             'use-ajax',
          ],
         ],
       ];
       $form['#attached']['library'][]      = 'core/drupal.dialog.ajax';
       $form['#attached']['library'][]      = 'core/drupal.ajax';

       $form['#prefix']                     = '&lt;div id="email-valid"&gt;&lt;/div&gt;';


And this is my function :

function custom_register_form_ajax_validate(&amp;$form, $form_state){

$response = new AjaxResponse();

  $form_state-&gt;setTemporaryValue('entity_validated', TRUE);

  $firstname = $form['field_first_name']['widget']['#default_value'];

  $email = $form_state-&gt;getValue('mail');

  $pass1 = $form_state-&gt;getValue('pass1');

  $pass2 = $form_state-&gt;getValue('pass2');

    if($firstname == ''){
         $text = '&lt;h5 style="color:red;"&gt;Firstname is required.&lt;/h5&gt;';
          $response-&gt;addCommand(new InvokeCommand('.form-text', 'css', array('border-bottom', '2px solid red')));
      $response-&gt;addCommand(new HtmlCommand('#email-valid', $text));
    }
    if($lastname == ''){
         $text = '&lt;h5 style="color:red;"&gt;Lastname is required.&lt;/h5&gt;';
          $response-&gt;addCommand(new InvokeCommand('.form-email', 'css', array('border-bottom', '2px solid red')));
      $response-&gt;addCommand(new HtmlCommand('#email-valid', $text));
    }
    if($email == ''){
         $text = '&lt;h5 style="color:red;"&gt;Email field is required.&lt;/h5&gt;';
          $response-&gt;addCommand(new InvokeCommand('.form-email', 'css', array('border-bottom', '2px solid red')));
          $response-&gt;addCommand(new HtmlCommand('#email-valid', $text));
    }
}


I want to validate "Firstname is required" condition.But when i submit and  validate the form,always showing "Email field is required".

How can i solve this issue?
You're probably not printing something required by the form since you are printing items individually. To start debugging, you can comment your entire form twig out and just use {{ form }} and see if it triggers validation.

At the same time, you are copy pasting the wrong thing in each error case:

      $response-&gt;addCommand(new InvokeCommand('.form-email', 'css', array('border-bottom', '2px solid red')));
      $response-&gt;addCommand(new HtmlCommand('#email-valid', $text));


This will always apply to elements with .form-email class and #email-valid id.

You're trying to evaluate $lastname but that variable is never set. If the email validation error always shows, then validate that you are using the right key in $form_state-&gt;getValue().

Since you are applying it to the same id, you are going to overwrite your own message each time as well. Check the documentation on HtmlCommand. It implements jQuery's html(string):


  When .html() is used to set an element's content, any content that was
  in that element is completely replaced by the new content.


You need to provide different divs to print these errors for the users sake, or rethink how you are doing this.