User profile validation control

Question

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?

Answer 1

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);
}