User profile validation control
So the solution for me in the end was to add the profile field name as a class name eg 'address1';

 &lt;input id="address1" name="fields[address1]" type="text" 
placeholder="address line 1" class="form-control input-md address1" req=""&gt;


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('&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);
}