Answers.Body: <p>So the solution for me in the end was to add the profile field name as a class name eg 'address1';</p>
  
  <pre><code> &lt;input id="address1" name="fields[address1]" type="text" 
  placeholder="address line 1" class="form-control input-md address1" req=""&gt;
  </code></pre>
  
  <p>Then in my ajax post when looping through the errors looking for the element class name</p>
  
  <pre><code>$("." + field).after($errorList);
  </code></pre>
  
  <p>as opposed to the input field name.</p>
  
  <pre><code>$.post('/', data, function(response) {
  
      //reset error messages
      $(this).find( '.errors' ).remove();
  
      if (response.success) {
          console.log("success")
      } else {
          event.preventDefault();
          console.log(response.errors);
          //reset errors
          $('.submit').append('&lt;span class="err"&gt;Please check the form for errors&lt;/span&gt;');
          appendErrors(response.errors);
      }
  
  });
  
  function appendErrors(errors) {
  
  $.each(errors, function(field, errors) {
      appendError(field, errors);
  });
  }
  
  function appendError(field, errors) {
     var $errorList = $( '&lt;ul class="errors"&gt;' );
     $.each(errors, function(index, error) {
       $errorList.append($('&lt;li&gt;').html(error));
     });
     $("." + field).after($errorList);
     // $('input[name='+ field +']').after($errorList);
  }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-15T10:16:34.717Z
Answers.LastActivityDate: 2017-04-15T10:16:34.717Z
Answers.UserDisplayName: joomkit
Body: <p>I have a front end reg form saving profiles via ajax. All user and profile data is getting stored ok.
  The problem comes with validation.</p>
  
  <p>It seems Craft likes to load the errors for certain fields first:</p>
  
  <pre><code>{% macro errorList(errors) %}
  </code></pre>
  
  <p>So the above fills the error array with username, title and email before processing the others. In ajax am getting the errors like:</p>
  
  <pre><code>function appendErrors(errors) {
  
  $.each(errors, function(field, errors) {
      appendError(field, errors);
  });
  }
  
  function appendError(field, errors) {
  var $errorList = $( '&lt;ul class="errors" /&gt;' );
  
  $.each(errors, function(index, error) {
      $errorList.append($('&lt;li&gt;').html(error));
      console.log(error);
  });
  
  $("input[name=" + field + "]").after($errorList);
  }
  </code></pre>
  
  <p>I'd like to show all the errors to the user at once on page for sensible UX reasons. So quick brain check - is Craft really doing this? If so, then I see my options like:</p>
  
  <ol>
  <li>Could switch to a pure jQuery/js validation </li>
  <li>Could try and manipulate the error array and reindex based on tabindex?</li>
  <li>Could try overriding Craft's validation thru plugin</li>
  </ol>
  
  <p>Has anyone else come at this in earnest?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-12T18:13:25.803Z
Comments.Text: Is your form calling `UsersController->actionSaveUser()`?  Are you running Craft Pro and the latest version of Craft?  `UsersService->saveUser()` validates the UserRecord first, then any custom fields/content and only then will return false with _all_ errors attached to the `UserModel`. https://github.com/pixelandtonic/Craft-Release/blob/master/app/services/UsersService.php#L274-L295
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-13T07:57:44.010Z
Comments.Text: Craft Pro latest on local dev machine, calling
  <input type="hidden" name="action" value="users/saveUser">
  The on screen errors always come for the core user fields first which i understand - makes sure we have a user first right:) But the other errors won't display onscreen. In the console i am spitting out the error append & can see all the extra userfields set to required with error messages. Two issues here a) nothing hits the screen b) there is no rational order to the errors array - ie they don't reflect the order of required fields when looped thru - so can't smooth scroll to them
Comments.UserDisplayName: joomkit
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-13T10:34:34.040Z
Comments.Text: I changed my error javascript to use field names as classes too and targeted the error output at them. Bingo
  $('input[name='+ field +']').after($errorList); doesnt seem to work consistently - possible jquery /browser quirk. So used $("." + field).after($errorList); and now all errors are on page at once - apart from
Comments.UserDisplayName: joomkit
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-13T18:13:09.290Z
Comments.Text: Ahh, sounds like you're sorted, then?  If so, would you mind adding what worked for you as an official answer?
Comments.UserDisplayName: Brad Bell
Tags: <registration><user-profile>
Title: User profile validation control
ThreadText: # User profile validation control
  
  (Asked by: username_0 on 2017-04-12)
  
  I have a front end reg form saving profiles via ajax. All user and profile data is getting stored ok.
  The problem comes with validation.
  
  It seems Craft likes to load the errors for certain fields first:
  
  ```
  {% macro errorList(errors) %}
  
  ```
  
  So the above fills the error array with username, title and email before processing the others. In ajax am getting the errors like:
  
  ```
  function appendErrors(errors) {
  
  $.each(errors, function(field, errors) {
      appendError(field, errors);
  });
  }
  
  function appendError(field, errors) {
  var $errorList = $( '<ul class="errors" />' );
  
  $.each(errors, function(index, error) {
      $errorList.append($('<li>').html(error));
      console.log(error);
  });
  
  $("input[name=" + field + "]").after($errorList);
  }
  
  ```
  
  I'd like to show all the errors to the user at once on page for sensible UX reasons. So quick brain check - is Craft really doing this? If so, then I see my options like:
  
  1. Could switch to a pure jQuery/js validation
  2. Could try and manipulate the error array and reindex based on tabindex?
  3. Could try overriding Craft's validation thru plugin
  
  Has anyone else come at this in earnest?
  
  **Tags:** registration, user-profile
  
  > **Comments:**
  > **username_1**: Is your form calling `UsersController->actionSaveUser()`?  Are you running Craft Pro and the latest version of Craft?  `UsersService->saveUser()` validates the UserRecord first, then any custom fields/content and only then will return false with _all_ errors attached to the `UserModel`. https://github.com/pixelandtonic/Craft-Release/blob/master/app/services/UsersService.php#L274-L295  
  > **username_0**: Craft Pro latest on local dev machine, calling <input type="hidden" name="action" value="users/saveUser"> The on screen errors always come for the core user fields first which i understand - makes sure we have a user first right:) But the other errors won't display onscreen. In the console i am spitting out the error append & can see all the extra userfields set to required with error messages. Two issues here a) nothing hits the screen b) there is no rational order to the errors array - ie they don't reflect the order of required fields when looped thru - so can't smooth scroll to them  
  > **username_0**: I changed my error javascript to use field names as classes too and targeted the error output at them. Bingo $('input[name='+ field +']').after($errorList); doesnt seem to work consistently - possible jquery /browser quirk. So used $("." + field).after($errorList); and now all errors are on page at once - apart from  
  > **username_1**: Ahh, sounds like you're sorted, then?  If so, would you mind adding what worked for you as an official answer?  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2017-04-15. Score: 0 | Accepted answer
  
  So the solution for me in the end was to add the profile field name as a class name eg 'address1';
  
  ```
   <input id="address1" name="fields[address1]" type="text" 
  placeholder="address line 1" class="form-control input-md address1" req="">
  
  ```
  
  Then in my ajax post when looping through the errors looking for the element class name
  
  ```
  $("." + field).after($errorList);
  
  ```
  
  as opposed to the input field name.
  
  ```
  $.post('/', data, function(response) {
  
      //reset error messages
      $(this).find( '.errors' ).remove();
  
      if (response.success) {
          console.log("success")
      } else {
          event.preventDefault();
          console.log(response.errors);
          //reset errors
          $('.submit').append('<span class="err">Please check the form for errors</span>');
          appendErrors(response.errors);
      }
  
  });
  
  function appendErrors(errors) {
  
  $.each(errors, function(field, errors) {
      appendError(field, errors);
  });
  }
  
  function appendError(field, errors) {
     var $errorList = $( '<ul class="errors">' );
     $.each(errors, function(index, error) {
       $errorList.append($('<li>').html(error));
     });
     $("." + field).after($errorList);
     // $('input[name='+ field +']').after($errorList);
  }
  
  ```
  
  
  ---
  
  