I created a secure WTF login form in my Flask server. I would like to have an alert pop up if the login info is non-existent/incorrect. Being that I am using Jinja to unpack the Python form in the template (rather than HTML), I do not know how to send the request to my JavaScript (jQuery) function to get it to trigger the pop-up.

I have tried searching for answers and multiple attempts at rerouting in the server and getting JS to "see" the Jinja, but what I feel this is amounting to is that I will have to dismantle my form, which I do not want to do.

Code

#secure login form

class LoginForm(FlaskForm):

    username = StringField(validators=[InputRequired(), Length(
        min=4, max=20)], render_kw={"placeholder": "Username"})

    password = PasswordField(validators=[InputRequired(), Length(
        min=4, max=20)], render_kw={"placeholder": "password"})

    submit = SubmitField("Login")

#this is the route in my flask server where I pass the python object to my template

@app.route("/login_page")
def show_login_page():
    """Display the login page"""

    form = LoginForm()
    
    return render_template("login.html", form=form)


#logic, if the username/pass is wrong/does not exist
#this was my attempt to use JSON to pass to my JS/jQuery to initiate the alert pop up

        if user_obj == None:
            bad_login_dict = {          
                "code": "Username or password incorrect"
                }

            return jsonify(bad_login_dict)


<!-- Jinja object in my template -->

<form action="/login_form" method="POST">

        {{ form.hidden_tag() }}
        {{ form.username() }}
        <br>
        {{ form.password() }}
        <br>


            <button id="login-button" class="btn grnbutton recipe-jump-button">Login</button>


    </form>
    <br>
    <br>
    <form action="/register_user">


// this is my last attempt at creating the alert
// this does not work, it just displays the json dictionary in the browser

function alertBadLogin(evt){
    evt.preventDefault();
    console.log("executing alert for bad login")
    $.post('/login_form'), res => {
        alert(res.bad_login_msg)}
}

If I can understand how to get Jinja and JS to talk to each other, that would help immensely.