自定义错误消息在提交时显示并消失

问题描述

我正在使用 flask、html、css 和 javascript。所以我所做的是在我的登录表单中输入一条错误消息作为新的并设置显示：无。 我通过比较之前设置的 SQLite 数据库中的值来验证输入凭据。 此验证在 flask 内部完成。提交表单时，它在 flask 内部进行验证，但是我创建了一个 javascript，它更改了错误消息的样式以显示：块。 这将显示错误字段的错误消息，正确输入的用户将被重定向到新页面，因此他们不会看到错误。

所以我希望在提交表单进行登录后显示错误消息，并且将重定向输入正确信息的用户。

Flask：

@app.route('/', methods=['POST', 'GET'])
def tutor_login():
    tutor_login_form = LoginAccount(request.form)
    if request.method == 'POST' and tutor_login_form.validate():
        session.pop('user', None)

    admin_account = Admin.query.all()
    tutor_account = Tutor.query.all()
    for i in admin_account:
        admin_id = i.admin_id_num
        for j in tutor_account:
            tutor_id = j.tutor_id_num
            if admin_id == tutor_login_form.id_num.data:
                admin_info = Admin.query.filter_by(admin_id_num=tutor_login_form.id_num.data).first()
                admin_pass = admin_info.admin_password

                if admin_pass == tutor_login_form.password.data:
                    session['user'] = tutor_login_form.id_num.data

                    return redirect(url_for('admin_main'))

            elif tutor_id == tutor_login_form.id_num.data:
                tutor_info = Tutor.query.filter_by(id_num=tutor_login_form.id_num.data).first()
                tutor_pass = tutor_info.tutor_password

                if tutor_pass == tutor_login_form.password.data:
                    session['user'] = tutor_login_form.id_num.data

                    return redirect(url_for('retrieve_tutor_account'))

    return render_template('tutorlogin.html')

HTML：

<form class="" action="" method="POST" onsubmit="validate()">
                                        <!-- Input fields -->
                                        <div class="form-group mt-3">
                                            <label for="id_num">Enter Tutor ID:</label>
                                            <input type="text" class="form-control" id="id_num" placeholder="Enter Tutor ID" name="id_num">
                                        </div>
                                        <div class="form-group my-3">
                                            <label for="password">Enter Password:</label>
                                            <input type="password" class="form-control password" id="password" placeholder="Enter Password" name="password">
                                        </div>
                                        <div class="mb-3 text-center" id="error">
                                            ID or Password entered is invalid! Please try again.
                                        </div>
                                        <div class="text-center">
                                        <button type="submit" class="btn btn-primary btn-customized">Login</button>
                                        </div>
                                        <div>
                                            <p class="text-center my-3">Forgot your password? <br> <a href="">Click here to reset</a></p>
                                        </div>
                                    </form>

Javascript：

<script>
    var error = document.getElementById('error');

    function validate(){
        error.style.display = "block";
    }
</script>