<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>

CC BY-SA 3.0
2017-04-15T10:16:34.717Z
2017-04-15T10:16:34.717Z
joomkit
<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>

CC BY-SA 3.0
2017-04-12T18:13:25.803Z
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
Brad Bell
CC BY-SA 3.0
2017-04-13T07:57:44.010Z
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
joomkit
CC BY-SA 3.0
2017-04-13T10:34:34.040Z
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
joomkit
CC BY-SA 3.0
2017-04-13T18:13:09.290Z
Ahh, sounds like you're sorted, then?  If so, would you mind adding what worked for you as an official answer?
Brad Bell
<registration><user-profile>
User profile validation control
# 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 = $( '' );

$.each(errors, function(index, error) {
    $errorList.append($('').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:

Could switch to a pure jQuery/js validation 
Could try and manipulate the error array and reindex based on tabindex?
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';
 

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('Please check the form for errors');
        appendErrors(response.errors);
    }

});

function appendErrors(errors) {

$.each(errors, function(field, errors) {
    appendError(field, errors);
});
}

function appendError(field, errors) {
   var $errorList = $( '' );
   $.each(errors, function(index, error) {
     $errorList.append($('').html(error));
   });
   $("." + field).after($errorList);
   // $('input[name='+ field +']').after($errorList);
}


---

