Django - HTMX:在模态上呈现表单错误并使用户保持在同一页面上?

x33g5p2x  于 2023-04-22  发布在  Go
关注(0)|答案(1)|浏览(167)

你可以帮助我了解如何使用HTMX呈现窗体的错误消息时,形式是无效的?
[![在此处输入图像描述][1]][1]
Docs建议使用如下属性:
hx-post="{% url 'accounts:login' %}"但因为我已经在使用method=post我应该仍然使用它或删除它?我希望用户留在当前页面,但是,现在当表单无效时,用户被重定向到这里:http://127.0.0.1:8000/accounts/login/

没有找到打开modal的javascript函数,估计是bootstrap自己实现的某个javascript打开的。

这是我的表格:

<form class="row my-4 align-items-center" method="post"
                                      action="{% url 'accounts:login' %}">
                                    {% csrf_token %}
                                    {{ login_form.as_p }}
                                    {% if login_form.errors %}
                                        <ul>
                                            {% for field_errors in login_form.errors.values %}
                                                {% for error in field_errors %}
                                                    <li>{{ error }}</li>
                                                {% endfor %}
                                            {% endfor %}
                                        </ul>
                                    {% endif %}
                                    <button type="submit" class="btn btn-primary">Ingresar</button>
                                </form>

观点:

def login_view(request):
    if request.method == 'POST':
        login_form = LoginForm(request, data=request.POST)
        print("### Request is post")

        if login_form.is_valid():
            print("### Request is VALID")
            username = login_form.cleaned_data.get('username')
            password = login_form.cleaned_data.get('password')
            print("User name", username, "type: ", type(username))
            print("Pass", password, "type: ", type(password))
            user = authenticate(request, username=username, password=password)
            if user is not None:
                login(request, user, backend='django.contrib.auth.backends.ModelBackend')
                return redirect("/")
        else:
            print(login_form.errors.as_data())
            return JsonResponse({'success': False, 'errors': login_form.errors})
    else:
        login_form = LoginForm(request)
        context = {
            "login_form": login_form,
        }
        return JsonResponse({'success': False, 'login_form': login_form, 'errors': login_form.errors})

我的网址:

from django.urls import path

from django.contrib import admin from django.urls import path, include from django.contrib.auth import views as auth_views from .views import register_view, email_user_needs_to_verify_email, verify_email, login_view, logout_view, password_reset_request

app_name = 'accounts'

urlpatterns = [
... other URL patterns ...
path('email_verification_required/', email_user_needs_to_verify_email, name='email_user_needs_to_verify_email'), path('register/', register_view, name='register'), path('verify-email/<str:uidb64>/<str:token>/', verify_email, name='verify_email'), path('login/', login_view, name='login'), path('logout/', logout_view, name='logout'), path("password_reset", password_reset_request, name="password_reset"), path('password_reset/done/', auth_views.PasswordResetDoneView.as_view(template_name='account/password_reset_done.html'), name='password_reset_done'), path('reset/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(template_name="account/password_reset_confirm.html"), name='password_reset_confirm'), path('reset/done/', auth_views.PasswordResetCompleteView.as_view(template_name='account/password_reset_complete.html'), name='password_reset_complete'), ]

当用户点击导航栏上的sing in按钮时,登录模式打开:*

{% else %}
                                    
  <li class="user"><a data-bs-toggle="modal" data-bs-target="#loginModal" href="#">Hello, sign in<i class="fa fa-user ps-2 text-primary"></i></a></li>
  <li class=""><a data-bs-toggle="" data-bs-target=""
              href="{% url 'accounts:register' %}">Regístrate<i
                                            class="fa fa-user ps-2 text-primary"></i></a></li>
    {% endif %}
    ```

  [1]: https://i.stack.imgur.com/9p3Hz.png
yqyhoc1h

yqyhoc1h1#

首先:让我欢迎你来到Django和HTMX这美好的一面。你可能在开始的时候有点挣扎,但这是值得的。
至于你的问题:我认为你错过了很多HTMX的基础知识以及如何使用它。我建议你从HTMX页面上的示例开始。
最接近你想要做的事情的例子是about form validation。HTMX站点上的所有例子都值得研究,因为它们教你基本概念。
在此之后,您将清楚您必须从上面添加到表单中的内容,以便启用HTMX。
接下来你可能想看看的是django-htmx包。它允许你做request.htmx之类的事情来检查请求是否来自HTMX。(请允许我插入一个blog article that I wrote关于一些高级Django + HTMX模式,其中还包括如何使其与Jinja一起工作。)
最后,关于你的问题,我建议你做以下计划:

  • 您需要启用您的表单,以便它将使用HTMX。为此,您必须添加hx-post属性。
  • 你需要在你的form-tag上定义hx-target属性,也就是你想要交换的元素。为什么?因为通常情况下,你要做的是:你在后台验证用户的输入,如果你发现输入有错误,你呈现包含错误消息的表单。然后,你只发送回包含错误的表单的HTML,并用它替换旧表单。
  • 如果没有错误,您希望登录用户并将其转发到“/"。这可以通过HTMX响应头来实现。通过发送回值为/HX-Redirect头,用户将被重定向到/

这应该是所有!我相信这是足够的信息,使您可以实现你想做的事情。祝你好运,让我知道它是如何去!

相关问题