'messages.error doesn't work with fetch js in form, Django

views:

if request.method == "POST":
        user_name = request.POST['user_name']
        email = request.POST['email']
        password = request.POST['password']
        re_password = request.POST['re_password']
        if len(user_name) >= 16:
            messages.error(request, 'Too long')
        ...

js:

const form = document.forms["register_form"];
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
form_data = new FormData(form);
myHeaders = new Headers()
myHeaders.append("X-CSRF-Token", csrftoken)
fetch("/account/register/", {
    headers: myHeaders,
    body: form_data,
    method: "POST"
}).then(function (response) {
    if (response.ok) {
        console.log("successfully registered");
        return response.json();
    }
    return Promise.reject(response);
}).then(function (data) {
    console.log(data);
}).catch(function (error) {
    console.warn('Custom Error:', error);
});

})

html:

 <form method="POST" name="register_form" id="register-form">
                    {% csrf_token %}
....
fields
....
{% for message in messages %}
    {{message}}
{% endfor %}

form working correctly and POST data without reloading page... but problem is about messages.error it doesn't work in template...any problem ? there is any solution to show errors from views in back-end without page refresh ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source