同一页面同路由下Flask WTForms双表单交叉验证错误如何解决？

登录、注册两个表单在同一个路由下处理POST请求，提交登录表单时，请求中仅携带登录表单的字段，注册表单的所有字段为空。Flask-WTF的表单在模板中访问errors属性时会自动触发校验，因此页面渲染时注册表单会因为空字段抛出必填项错误，属于预期外的误校验。

推荐优先使用后端处理方案，从根源避免误校验：

方案1：按提交按钮区分校验逻辑 #

修改路由代码，仅对用户实际提交的表单执行校验，未被提交的表单禁止读取POST请求数据，避免自动校验：

@app.route("/", methods=['GET', 'POST'])
def home():
    login_form = LoginForm()
    regis_form = RegistrationForm()
    if request.method == 'POST':
        # 提交的是登录表单
        if 'submit_login' in request.form:
            # 初始化注册表单时传入formdata=None，禁止其读取POST数据，不会触发校验
            regis_form = RegistrationForm(formdata=None)
            if login_form.validate_on_submit():
                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')
        # 提交的是注册表单
        elif 'submit_regis' in request.form:
            # 初始化登录表单时传入formdata=None，禁止其读取POST数据
            login_form = LoginForm(formdata=None)
            if regis_form.validate_on_submit():
                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)

方案2：前端辅助清空错误样式 #

如果不想修改后端逻辑，可通过JavaScript在模态框关闭、切换标签时手动移除错误样式：

// 监听模态框关闭事件，清空所有表单错误
const loginModal = document.getElementById('loginModal')
loginModal.addEventListener('hidden.bs.modal', function () {
  document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'))
  document.querySelectorAll('.invalid-feedback').forEach(el => el.textContent = '')
})

// 切换到注册标签时清空注册表单的错误
document.querySelector('button#regis').addEventListener('click', function () {
  document.querySelectorAll('#regis .is-invalid').forEach(el => el.classList.remove('is-invalid'))
  document.querySelectorAll('#regis .invalid-feedback').forEach(el => el.textContent = '')
})

内容的提问来源于stack exchange，提问作者Hamza Mir