你可以帮助我了解如何使用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
1条答案
按热度按时间yqyhoc1h1#
首先:让我欢迎你来到Django和HTMX这美好的一面。你可能在开始的时候有点挣扎,但这是值得的。
至于你的问题:我认为你错过了很多HTMX的基础知识以及如何使用它。我建议你从HTMX页面上的示例开始。
最接近你想要做的事情的例子是about form validation。HTMX站点上的所有例子都值得研究,因为它们教你基本概念。
在此之后,您将清楚您必须从上面添加到表单中的内容,以便启用HTMX。
接下来你可能想看看的是
django-htmx
包。它允许你做request.htmx
之类的事情来检查请求是否来自HTMX。(请允许我插入一个blog article that I wrote关于一些高级Django + HTMX模式,其中还包括如何使其与Jinja一起工作。)最后,关于你的问题,我建议你做以下计划:
hx-post
属性。hx-target
属性,也就是你想要交换的元素。为什么?因为通常情况下,你要做的是:你在后台验证用户的输入,如果你发现输入有错误,你呈现包含错误消息的表单。然后,你只发送回包含错误的表单的HTML,并用它替换旧表单。/
的HX-Redirect
头,用户将被重定向到/
。这应该是所有!我相信这是足够的信息,使您可以实现你想做的事情。祝你好运,让我知道它是如何去!