Answers.Body: <p>No errors are displayed because you are using AJAX to post your data. The <code>errorList</code> function works only with "regular" POST flow. When ajax response is available you need to grab it and append errors yourself.</p>
  
  <p>Try this code:</p>
  
  <pre><code>$('#registrationForm').submit(function(ev) {
      ev.preventDefault();
  
      var data = $(this).serialize();
  
      $.post('/', data, function(response) {
  
          if (response.success) {
              console.log("success")
          } else {
              console.log(response.errors);
              appendErrors(response.errors);
          }
  
      });
  });
  
  function appendErrors(errors) {
      $.each(errors, function(field, errors) {
          appendError(field, errors);
      });
  }
  
  function appendError(field, errors) {
      var $errorList = $('&lt;ul&gt;');
  
      $.each(errors, function(index, error) {
          $errorList.append($('&lt;li&gt;').html(error));
      });
  
      $("input[name=" + field + "]").after($errorList);
  }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-31T10:25:11.377Z
Answers.Text: Exactly what I needed. Worked in one go!
Answers.UserDisplayName: Justin Dekkers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-31T10:20:47.540Z
Answers.LastActivityDate: 2017-03-31T10:20:47.540Z
Answers.UserDisplayName: Krzysztof Boduch
Body: <p>I have a user registration form on my Front-end which is submitted with Ajax which works fine. </p>
  
  <p>The only problem is that if I have any errors, like an already in use username they wont be displayed. The still function but just wont be displayed. Same goes for empty required fields.</p>
  
  <p>Without using AJAX the errors are displayed as they should though.</p>
  
  <p><strong>Here is my Ajax:</strong></p>
  
  <pre><code>$('#registrationForm').submit(function(ev) {
      ev.preventDefault();
  
      var data = $(this).serialize();
  
      $.post('/', data, function(response) {
  
      console.log(response);
  
      if (response.success) {
          console.log("success")
      } else {
          console.log(response.error);
      }
  });
  </code></pre>
  
  <p><strong>Here is my form:</strong></p>
  
  <pre><code>&lt;form id="registrationForm" method="post" accept-charset="UTF-8"&gt;
      {{ getCsrfInput() }}
      &lt;input type="hidden" name="action" value="users/saveUser"&gt;
      &lt;input type="hidden" name="redirect" value="/succes"&gt;
  
      {% macro errorList(errors) %}
          {% if errors %}
              &lt;ul class="errors"&gt;
                  {% for error in errors %}
                      &lt;li&gt;{{ error }}&lt;/li&gt;
                  {% endfor %}
              &lt;/ul&gt;
          {% endif %}
      {% endmacro %}
  
      {% from _self import errorList %}
      &lt;input id="firstName" type="text" name="firstName" placeholder="Naam"&gt;
      &lt;input id="username" class="hidden" type="text" name="username"
          {%- if account is defined %} value="{{ account.username }}"{% endif -%}&gt;
      &lt;input id="email" type="text" name="email" placeholder="E-mailadres" 
          {%- if account is defined %} value="{{ account.email }}"{% endif %}&gt;
  
      {% if account is defined %}
          {{ errorList(account.getErrors('email')) }}
      {% endif %}
  
      &lt;input id="wachtwoord" type="password" name="password" placeholder="Wachtwoord"&gt;
  
      &lt;input id="leeftijd" type="text" name="leeftijd" placeholder="Wat is je leeftijd?"&gt;
  
      {% if account is defined %}
          {{ errorList(account.getErrors('password')) }}
      {% endif %}
      &lt;input id="userPhoto" class="button sec hover-btn blue-btn" type="file" name="userPhoto" value="{{ acc.uploadProfielButton }}"&gt;
      &lt;input class="button hover-btn orange-btn" type="submit" value="{{ acc.aanmeldenButton }}"&gt;
  &lt;/form&gt;
  </code></pre>
  
Tags: <form><ajax><registration><frontend-form>
Title: AJAX Front-end User Registration Form not displaying macro errorList
ThreadText: # AJAX Front-end User Registration Form not displaying macro errorList
  
  (Asked by: username_0 on 2017-03-31)
  
  I have a user registration form on my Front-end which is submitted with Ajax which works fine.
  
  The only problem is that if I have any errors, like an already in use username they wont be displayed. The still function but just wont be displayed. Same goes for empty required fields.
  
  Without using AJAX the errors are displayed as they should though.
  
  **Here is my Ajax:**
  
  ```
  $('#registrationForm').submit(function(ev) {
      ev.preventDefault();
  
      var data = $(this).serialize();
  
      $.post('/', data, function(response) {
  
      console.log(response);
  
      if (response.success) {
          console.log("success")
      } else {
          console.log(response.error);
      }
  });
  
  ```
  
  **Here is my form:**
  
  ```
  <form id="registrationForm" method="post" accept-charset="UTF-8">
      {{ getCsrfInput() }}
      <input type="hidden" name="action" value="users/saveUser">
      <input type="hidden" name="redirect" value="/succes">
  
      {% macro errorList(errors) %}
          {% if errors %}
              <ul class="errors">
                  {% for error in errors %}
                      <li>{{ error }}</li>
                  {% endfor %}
              </ul>
          {% endif %}
      {% endmacro %}
  
      {% from _self import errorList %}
      <input id="firstName" type="text" name="firstName" placeholder="Naam">
      <input id="username" class="hidden" type="text" name="username"
          {%- if account is defined %} value="{{ account.username }}"{% endif -%}>
      <input id="email" type="text" name="email" placeholder="E-mailadres" 
          {%- if account is defined %} value="{{ account.email }}"{% endif %}>
  
      {% if account is defined %}
          {{ errorList(account.getErrors('email')) }}
      {% endif %}
  
      <input id="wachtwoord" type="password" name="password" placeholder="Wachtwoord">
  
      <input id="leeftijd" type="text" name="leeftijd" placeholder="Wat is je leeftijd?">
  
      {% if account is defined %}
          {{ errorList(account.getErrors('password')) }}
      {% endif %}
      <input id="userPhoto" class="button sec hover-btn blue-btn" type="file" name="userPhoto" value="{{ acc.uploadProfielButton }}">
      <input class="button hover-btn orange-btn" type="submit" value="{{ acc.aanmeldenButton }}">
  </form>
  
  ```
  
  **Tags:** form, ajax, registration, frontend-form
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-03-31. Score: 3 | Accepted answer
  
  No errors are displayed because you are using AJAX to post your data. The `errorList` function works only with "regular" POST flow. When ajax response is available you need to grab it and append errors yourself.
  
  Try this code:
  
  ```
  $('#registrationForm').submit(function(ev) {
      ev.preventDefault();
  
      var data = $(this).serialize();
  
      $.post('/', data, function(response) {
  
          if (response.success) {
              console.log("success")
          } else {
              console.log(response.errors);
              appendErrors(response.errors);
          }
  
      });
  });
  
  function appendErrors(errors) {
      $.each(errors, function(field, errors) {
          appendError(field, errors);
      });
  }
  
  function appendError(field, errors) {
      var $errorList = $('<ul>');
  
      $.each(errors, function(index, error) {
          $errorList.append($('<li>').html(error));
      });
  
      $("input[name=" + field + "]").after($errorList);
  }
  
  ```
  
  > **Comments:**
  > **username_0**: Exactly what I needed. Worked in one go!  
  
  ---
  
  