[英]Bootstrap form showing error messages in a different style
I have two forms in my django app, and I'm using bootstrap3 to custom them, But the error messages to the form aren't equal. 我的django应用程序中有两种形式,我正在使用bootstrap3对其进行自定义,但是该形式的错误消息并不相同。
It all is in portuguese 全部都是葡萄牙语
My templates are using the same structure, I don't know why the difference. 我的模板使用相同的结构,我不知道为什么会有所不同。
login.html 的login.html
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% block content %}
<div class="row">
<div class="col-sm-4">
<form method="POST" action="">
{% csrf_token %}
{% bootstrap_form form %}
<input class='btn btn-primary' type="submit" value="Logar">
</form></br></br>
</div>
</div>
{% endblock %}
</body>
</html>
signup.html signup.html
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% block content %}
<div class="row">
<div class="col-sm-4">
<form method="POST" action="">
{% csrf_token %}
{% bootstrap_form form %}
<input class='btn btn-primary' type="submit" value="Cadastrar">
</form>
</div>
</div>
{% endblock %}
</body>
</html>
forms.py forms.py
from django.contrib.auth import get_user_model, authenticate
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.forms import AuthenticationForm
from .models import User
from django import forms
class UserCreateForm(UserCreationForm):
class Meta:
fields = ("username","email", "password1","password2")
model = get_user_model()
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["username"].label = "Usuário"
self.fields["email"].label = "Email"
self.fields["password2"].help_text = None
#self.fields["email"].widget.attrs['readonly']=True
def clean_email(self):
email = self.cleaned_data['email'].lower()
try:
u = User.objects.get(email=email)
except User.DoesNotExist:
return email
raise forms.ValidationError('Email já em uso')
# return self.cleaned_data['email'].lower()
class UserLogin(AuthenticationForm):
def clean(self):
username = self.cleaned_data.get('username')
password = self.cleaned_data.get('password')
if username and password:
self.user_cache = authenticate(username=username, password=password)
if self.user_cache is None:
raise forms.ValidationError(
("Email ou Senha errados"))
elif not self.user_cache.is_active:
raise forms.ValidationError(("This account is inactive."))
return self.cleaned_data
base.html base.html文件
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Static Top Navbar Example for Bootstrap</title>
{% include 'header_css.html' %}
</head>
<body>
{% include 'navbar.html' %}
{% block jumbotron %}
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
{% block jumbotron_content %}
{% endblock %}
</div>
{% block content %}
{% endblock %}
</div> <!-- /container -->
{% endblock jumbotron %}
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>
</body>
</html>
It's looks like signup.html and login.html pages are using different bootstrap styles (probably one file is still in cache). 看起来signup.html和login.html页面正在使用不同的引导程序样式(可能一个文件仍在缓存中)。
Have you tried "hard refresh" in your browser (CTRL + clicking on refresh button in Chrome, CTRL + F5 in Firefox)? 您是否尝试过在浏览器中进行“硬刷新”(在Chrome中按CTRL +单击刷新按钮,在Firefox中按CTRL + F5)?
The first screenshot is applying the error message to the entire form, ( NON_FIELD_ERRORS
), the second looks like it is applying the errors to the individual fields themselves. 第一个屏幕快照将错误消息应用于整个表单(
NON_FIELD_ERRORS
),第二个屏幕快照看起来像是将错误应用于各个字段本身。 In the screenshot on the left the error text is being printed at the top because the error has been applied to the whole form, not a specific field. 在左侧的屏幕截图中,错误文本显示在顶部,因为错误已应用于整个表单,而不是特定字段。
In UserCreateForm
you are applying the error to the email
field by validating in the clean_email
method. 在
UserCreateForm
您通过在clean_email
方法中进行验证将错误应用于email
字段。 In UserLogin
it is a general clean
. 在
UserLogin
它是常规clean
。
Please see https://docs.djangoproject.com/en/1.10/ref/forms/validation/#cleaning-and-validating-fields-that-depend-on-each-other 请参阅https://docs.djangoproject.com/en/1.10/ref/forms/validation/#cleaning-and-validating-fields-that-depend-on-each-other
You could use the add_error
method to specify the field you want the error to, to replicate the right hand screenshot, or add_error(None,...
to replicate the formatting on the left (or just use clean
instead of clean_email
). 您可以使用
add_error
方法指定错误要输入的字段,以复制右侧屏幕截图,或使用add_error(None,...
复制左侧的格式)(或仅使用clean
而不是clean_email
)。
See also: https://docs.djangoproject.com/en/1.10/ref/forms/api/#django.forms.Form.add_error 另请参阅: https : //docs.djangoproject.com/en/1.10/ref/forms/api/#django.forms.Form.add_error
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.