HTML-форма в Django: ошибки, не обновляющиеся в DOM после неудачной проверки

Я использую HTML с Django для отправки контактной формы без обновления страницы. Когда в форме появляются ошибки, мой сервер корректно возвращает шаблон contact_messages.html, но ошибки не отображаются на странице после запроса.

Я вижу правильный ответ на вкладке Сеть и contact_messages.html содержит ожидаемые сообщения о проверке. Однако HTML не обновляет div#contact-сообщения в моем файле contact.html.

Прежде чем пытаться использовать HTML, проверьте, работает ли встроенная в Django проверка форм безукоризненно. Однако, как всем известно, процесс является синхронным, и я хочу сделать его асинхронным с помощью HTML.

Это мой взгляд:

class ContactView(FormView):

    template_name = 'contact/contact.html'
    form_class = ContactForm
    success_url = reverse_lazy('contact')

    def form_valid(self, form):        

        messages.success(self.request, "Your message has been sent. We will be in touch with you as soon as possible.")
        return redirect(self.success_url + '#contact-section')


    def form_invalid(self, form):
        messages.error(
            self.request,
            "There were some errors in your submission. Please review the highlighted fields and try again",
            extra_tags="danger")

        if self.request.headers.get("HX-Request"):
            return render(self.request, "contact/contact_messages.html", {"form": form}, content_type="text/html", status=400)

        return super().form_invalid(form)

Это моя анкета в contact.html:

<form id="contact-form" method="post" hx-post="{% url 'contact' %}"
                         hx-target="#contact-messages"  hx-swap="innerHTML" novalidate>

                        {% csrf_token %}

                        <div id='contact-messages'>
                            {% include 'contact/contact_messages.html' %}

                        </div>


                        <div class="form-group mb-0">
                            <button class=" btn btn-primary w-100">
                                <span>Send Message</span>
                            </button>
                        </div>

                       
                    </form>

Это мой дополнительный шаблон contact_messages.html:

% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }}" role="alert">
            {{ message }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
        </div>
    {% endfor %}
{% endif %}

{% for field in form %}
    <div class="form-group">
        {{ field }}
        {% if form.errors %}
            <div class="invalid-feedback d-block">
                {% for error in field.errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}
    </div>
{% endfor %}

Здесь вы можете видеть, что Django возвращает правильный ответ, но я не могу отразить его в contact.html.

Вернуться на верх