首页 Python flask wtforms 在同一 html 页面和同一路由/视图上的 2 个表单上显示验证错误
flask wtforms 在同一 html 页面和同一路由/视图上的 2 个表单上显示验证错误
[英] flask wtforms showing validation error on 2 forms on the same html page and same route/view
本文介绍了flask wtforms 在同一 html 页面和同一路由/视图上的 2 个表单上显示验证错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我在 home.html
home.html
登录<div class="模态淡入淡出";id=登录模态"tabindex="-1";aria-labelledby="exampleModalLabel";咏叹调隐藏=真"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title";id="exampleModalLabel">登录</h5><按钮类型=按钮"类=btn-close"；data-bs-dismiss=modal"aria-label=关闭"></button> <div class="modal-body">登录</button><button id="regis";class=btn btn-login btn-md">注册</button><hr style=margin-top: 0px;">
<表单方法=POST"动作=">{{ login_form.hidden_tag() }}<fieldset class="form-group"><div class="form-group">{% if login_form.email_login.errors %}{{ login_form.email_login(class="form-control form-control-md is-invalid") }}<div class="invalid-feedback">{% 用于 login_form.email_login.errors 中的错误 %}<span>{{ error }}</span>{% 结束为 %}
{％ 别的 ％}{{ login_form.email_login(class="form-control form-control-md mb-2", placeholder="Email") }}{％ 万一 ％}
<div class="form-group">{% if login_form.password_login.errors %}{{ login_form.password_login(class="form-control form-control-md is-invalid") }}<div class="invalid-feedback">{% for login_form.password_login.errors %}<span>{{ error }}</span>{% 结束为 %}
{％ 别的 ％}{{ login_form.password_login(class="form-control form-control-md mb-2", placeholder="密码") }}{％ 万一 ％}
<div class="form-check">{{ login_form.remember(class="form-check-input") }}{{ login_form.remember.label(class=form-check-label") }}
</fieldset><div class="form-group">{{ login_form.submit_login(class=btn btn-danger") }}<small class="text-muted ml-2"><a href=">忘记密码?</a></小>
</表单>
<表单方法=POST"动作=">{{ regis_form.hidden_tag() }}<fieldset class="form-group"><div class="form-group">{% 如果 regis_form.username_regis.errors %}{{ regis_form.username_regis(class="form-control form-control-md is-invalid") }}<div class="invalid-feedback">{% for error in regis_form.username_regis.errors %}<span>{{ error }}</span>{% 结束为 %}
{％ 别的 ％}{{ regis_form.username_regis(class="form-control form-control-md mb-2", placeholder="用户名") }}{％ 万一 ％}
<div class="form-group">{% 如果 regis_form.email_regis.errors %}{{ regis_form.email_regis(class="form-control form-control-md is-invalid") }}<div class="invalid-feedback">{% for error in regis_form.email_regis.errors %}<span>{{ error }}</span>{% 结束为 %}
{％ 别的 ％}{{ regis_form.email_regis(class=form-control form-control-md mb-2", placeholder=Email") }}{％ 万一 ％}
<div class="form-group">{% 如果 regis_form.password_regis.errors %}{{ regis_form.password_regis(class="form-control form-control-md is-invalid") }}<div class="invalid-feedback">{% for error in regis_form.password_regis.errors %}<span>{{ error }}</span>{% 结束为 %}
{％ 别的 ％}{{ regis_form.password_regis(class=form-control form-control-md mb-2", placeholder=密码") }}{％ 万一 ％}
</fieldset><div class="form-group">{{ regis_form.submit_regis(class=btn btn-danger") }}
</表单>
两个登录"和注册"按钮是选项卡，即通过点击注册"；按钮，您将看到由 JavaScript 控制的注册表单，反之亦然.
我的 forms.py
forms.py
class RegistrationForm(FlaskForm):username_regis = StringField('用户名',验证器=[DataRequired(), Length(min=2, max=20)])email_regis = StringField('Email',验证器=[DataRequired(), Email()])password_regis = PasswordField('Password', validators=[DataRequired()])submit_regis = SubmitField('注册')类 LoginForm(FlaskForm):email_login = StringField('Email',验证器=[DataRequired(), Email()])password_login = PasswordField('密码', validators=[DataRequired()])记住 = BooleanField('记住我')submit_login = SubmitField('登录')及以下是 routes.py
routes.py
@app.route("/", methods=['GET', 'POST'])定义家():登录表单 = 登录表单()regis_form = 注册表格()如果 request.method == 'POST':如果 login_form.validate_on_submit() 和 login_form.submit_login.data:用户 = User.query.filter_by(email=login_form.email_login.data).first()如果用户和 bcrypt.check_password_hash(user.password, login_form.password_login.data):login_user(用户，记住=login_form.remember.data)next_page = request.args.get('next')返回重定向(next_page)如果next_page否则重定向(url_for('home'))别的:flash('登录失败.请检查邮箱和密码', '危险')如果 regis_form.validate_on_submit() 和 regis_form.submit_regis.data:hashed_password = bcrypt.generate_password_hash(regis_form.password_regis.data).decode('utf-8')用户 = 用户(用户名=regis_form.username_regis.data，email=regis_form.email_regis.data，密码=hashed_password)db.session.add(用户)db.session.commit()flash('您的帐户已创建！您现在可以登录', '成功')返回重定向(url_for('home'))return render_template('home.html', login_form=login_form, regis_form=regis_form)现在，问题是当我尝试使用未注册的电子邮件登录时，它会闪烁我'登录失败.请检查电子邮件和密码' 这是可以的，因为它应该这样做.但是当我再次打开登录模式并打开注册选项卡时，* username_regis password_regis 和 email_regis* 字段向我显示该字段为必填字段"错误.
它不应该在注册表单上显示这个错误，因为我从来没有提交过这个表格.
我想去掉这些错误信息.我将非常感谢任何帮助.
解决方案
你写的代码如下:
if request.method == 'POST':如果 login_form.validate_on_submit() 和 login_form.submit_login.data:<片段>如果 regis_form.validate_on_submit() 和 regis_form.submit_regis.data:<片段>这意味着两个 表单都经过验证，无论您提交什么表单.因此，当您提交一个表单时，另一个表单将始终显示错误.首选 解决方案是发布到不同的路由.在您的表单上，需要填写 action 参数，并且您需要两个函数，每个路由一个.您也无需询问表单数据是否可用.一定是这样，因为你在这条路上.
So I have 2 forms, login form and registration form, on home.html
home.html
<button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#loginModal">
Login
</button>
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign In</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<button id="login" class="btn btn-login btn-md">Log In</button>
<button id="regis" class="btn btn-login btn-md">Register</button><hr style="margin-top: 0px;">
<div class="" id="login">
<form method="POST" action="">
{{ login_form.hidden_tag() }}
<fieldset class="form-group">
<div class="form-group">
{% if login_form.email_login.errors %}
{{ login_form.email_login(class="form-control form-control-md is-invalid") }}
<div class="invalid-feedback">
{% for error in login_form.email_login.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ login_form.email_login(class="form-control form-control-md mb-2", placeholder="Email") }}
{% endif %}
</div>
<div class="form-group">
{% if login_form.password_login.errors %}
{{ login_form.password_login(class="form-control form-control-md is-invalid") }}
<div class="invalid-feedback">
{% for error in login_form.password_login.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ login_form.password_login(class="form-control form-control-md mb-2", placeholder="Password") }}
{% endif %}
</div>
<div class="form-check">
{{ login_form.remember(class="form-check-input") }}
{{ login_form.remember.label(class="form-check-label") }}
</div>
</fieldset>
<div class="form-group">
{{ login_form.submit_login(class="btn btn-danger") }}
<small class="text-muted ml-2">
<a href="">Forgot Password?</a>
</small>
</div>
</form>
</div>
<div class="" id="regis">
<form method="POST" action="">
{{ regis_form.hidden_tag() }}
<fieldset class="form-group">
<div class="form-group">
{% if regis_form.username_regis.errors %}
{{ regis_form.username_regis(class="form-control form-control-md is-invalid") }}
<div class="invalid-feedback">
{% for error in regis_form.username_regis.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ regis_form.username_regis(class="form-control form-control-md mb-2", placeholder="Username") }}
{% endif %}
</div>
<div class="form-group">
{% if regis_form.email_regis.errors %}
{{ regis_form.email_regis(class="form-control form-control-md is-invalid") }}
<div class="invalid-feedback">
{% for error in regis_form.email_regis.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ regis_form.email_regis(class="form-control form-control-md mb-2", placeholder="Email") }}
{% endif %}
</div>
<div class="form-group">
{% if regis_form.password_regis.errors %}
{{ regis_form.password_regis(class="form-control form-control-md is-invalid") }}
<div class="invalid-feedback">
{% for error in regis_form.password_regis.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ regis_form.password_regis(class="form-control form-control-md mb-2", placeholder="Password") }}
{% endif %}
</div>
</fieldset>
<div class="form-group">
{{ regis_form.submit_regis(class="btn btn-danger") }}
</div>
</form>
</div>
</div>
</div>
</div>
</div>
The two "Log In" and "Register" buttons are tabs i.e. by clicking on "Register" button you will see registration form and vice versa which is controlled by JavaScript.
My forms.py
forms.py
class RegistrationForm(FlaskForm):
username_regis = StringField('Username',
validators=[DataRequired(), Length(min=2, max=20)])
email_regis = StringField('Email',
validators=[DataRequired(), Email()])
password_regis = PasswordField('Password', validators=[DataRequired()])
submit_regis = SubmitField('Sign Up')
class LoginForm(FlaskForm):
email_login = StringField('Email',
validators=[DataRequired(), Email()])
password_login = PasswordField('Password', validators=[DataRequired()])
remember = BooleanField('Remember Me')
submit_login = SubmitField('Login')
and below is the routes.py
routes.py
@app.route("/", methods=['GET', 'POST'])
def home():
login_form = LoginForm()
regis_form = RegistrationForm()
if request.method == 'POST':
if login_form.validate_on_submit() and login_form.submit_login.data:
user = User.query.filter_by(email=login_form.email_login.data).first()
if user and bcrypt.check_password_hash(user.password, login_form.password_login.data):
login_user(user, remember=login_form.remember.data)
next_page = request.args.get('next')
return redirect(next_page) if next_page else redirect(url_for('home'))
else:
flash('Login Unsuccessful. Please check email and password', 'danger')
if regis_form.validate_on_submit() and regis_form.submit_regis.data:
hashed_password = bcrypt.generate_password_hash(regis_form.password_regis.data).decode('utf-8')
user = User(username=regis_form.username_regis.data, email=regis_form.email_regis.data, password=hashed_password)
db.session.add(user)
db.session.commit()
flash('Your account has been created! You are now able to log in', 'success')
return redirect(url_for('home'))
return render_template('home.html', login_form=login_form, regis_form=regis_form)
Now, The problem is that when I try to login using an email that is not registered it flashes me
'Login Unsuccessful. Please check email and password'
which is ok as it should do this. but when I open the login modal again and open the registration tab, the * username_regis password_regis and email_regis* fields are showing me 'The field is required' error.
It should not show me this error on registration form because I never submitted this form.
I want to get rid of these error messages. I will deeply appreciate any help.
解决方案
The code you wrote is as follows:
if request.method == 'POST':
if login_form.validate_on_submit() and login_form.submit_login.data:
<SNIP>
if regis_form.validate_on_submit() and regis_form.submit_regis.data:
<SNIP>
That means that both forms are are validated, no matter what form you submit. So when you submit one form the other will always show errors. The preferred solution is to post to different routes. On your form the action parameter will need to be filled and you will need two functions, one for each route. You than will also get rid of asking if form data is available. It must be, because you are on that route.
这篇关于flask wtforms 在同一 html 页面和同一路由/视图上的 2 个表单上显示验证错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
