AJAX Front-end User Registration Form not displaying macro errorList

Question

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>

Answer 1

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