2

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

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);
}
  • Exactly what I needed. Worked in one go! – Justin Dekkers Mar 31 '17 at 10:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.