<p>No errors are displayed because you are using AJAX to post your data. The <code>errorList</code> function works only with "regular" POST flow. When ajax response is available you need to grab it and append errors yourself.</p>

<p>Try this code:</p>

<pre><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 = $('&lt;ul&gt;');

    $.each(errors, function(index, error) {
        $errorList.append($('&lt;li&gt;').html(error));
    });

    $("input[name=" + field + "]").after($errorList);
}
</code></pre>

CC BY-SA 3.0
2017-03-31T10:25:11.377Z
Exactly what I needed. Worked in one go!
Justin Dekkers
CC BY-SA 3.0
2017-03-31T10:20:47.540Z
2017-03-31T10:20:47.540Z
Krzysztof Boduch
<p>I have a user registration form on my Front-end which is submitted with Ajax which works fine. </p>

<p>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.</p>

<p>Without using AJAX the errors are displayed as they should though.</p>

<p><strong>Here is my Ajax:</strong></p>

<pre><code>$('#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);
    }
});
</code></pre>

<p><strong>Here is my form:</strong></p>

<pre><code>&lt;form id="registrationForm" method="post" accept-charset="UTF-8"&gt;
    {{ getCsrfInput() }}
    &lt;input type="hidden" name="action" value="users/saveUser"&gt;
    &lt;input type="hidden" name="redirect" value="/succes"&gt;

    {% macro errorList(errors) %}
        {% if errors %}
            &lt;ul class="errors"&gt;
                {% for error in errors %}
                    &lt;li&gt;{{ error }}&lt;/li&gt;
                {% endfor %}
            &lt;/ul&gt;
        {% endif %}
    {% endmacro %}

    {% from _self import errorList %}
    &lt;input id="firstName" type="text" name="firstName" placeholder="Naam"&gt;
    &lt;input id="username" class="hidden" type="text" name="username"
        {%- if account is defined %} value="{{ account.username }}"{% endif -%}&gt;
    &lt;input id="email" type="text" name="email" placeholder="E-mailadres" 
        {%- if account is defined %} value="{{ account.email }}"{% endif %}&gt;

    {% if account is defined %}
        {{ errorList(account.getErrors('email')) }}
    {% endif %}

    &lt;input id="wachtwoord" type="password" name="password" placeholder="Wachtwoord"&gt;

    &lt;input id="leeftijd" type="text" name="leeftijd" placeholder="Wat is je leeftijd?"&gt;

    {% if account is defined %}
        {{ errorList(account.getErrors('password')) }}
    {% endif %}
    &lt;input id="userPhoto" class="button sec hover-btn blue-btn" type="file" name="userPhoto" value="{{ acc.uploadProfielButton }}"&gt;
    &lt;input class="button hover-btn orange-btn" type="submit" value="{{ acc.aanmeldenButton }}"&gt;
&lt;/form&gt;
</code></pre>

<form><ajax><registration><frontend-form>
AJAX Front-end User Registration Form not displaying macro errorList
# AJAX Front-end User Registration Form not displaying macro errorList

(Asked by: username_0 on 2017-03-31)

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:

    {{ getCsrfInput() }}
    
    

    {% macro errorList(errors) %}
        {% if errors %}
            
                {% for error in errors %}
                    {{ error }}
                {% endfor %}
            
        {% endif %}
    {% endmacro %}

    {% from _self import errorList %}
    
    
    

    {% if account is defined %}
        {{ errorList(account.getErrors('email')) }}
    {% endif %}

    

    

    {% if account is defined %}
        {{ errorList(account.getErrors('password')) }}
    {% endif %}

**Tags:** form, ajax, registration, frontend-form

---

## 1 answers

### Answer by username_1 on 2017-03-31. Score: 3 | Accepted answer

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 = $('');

    $.each(errors, function(index, error) {
        $errorList.append($('').html(error));
    });

    $("input[name=" + field + "]").after($errorList);
}

> **Comments:**
> **username_0**: Exactly what I needed. Worked in one go!  

---

