JavaScript Spinner is conflicting with The input "required" attribute using WTForms

Question

I am using Flask, and have some basic elements on a login page. A route, a form, and a template. I also have a spinner that is triggered on the submission of the form.

Where I am running into issues is when someone does not fill out the info, and hits submit. Basically, a spinner is triggered, but also the infobulle warning the user to fill out the field is triggered as well causing the spinner to be stuck spinning.

Form:

class LoginForm(FlaskForm):

email = StringField("Email Address", validators=[DataRequired(), Email()])
password = PasswordField("Password", validators=[DataRequired()])
submit = SubmitField("Login")

Route:

@auth.route("/login", methods=["Get", "Post"])
def login():
    
    form = LoginForm()

    if form.validate_on_submit():
        # Login to the site
return render_template("login.html", form=form, title="Sign In")

Template:

<form class="text-left col-lg-12" action="" method="POST">
    {{ form.hidden_tag() }} 
    <div class="form-group">
        {% if form.email.errors %}
        {{ form.email(class_="form-control is-invalid", placeholder="Email") }}
        <div class="invalid-feedback">
            {% for error in form.email.errors %}
            <span> {{ error }} </span>
            {% endfor %}
        </div>
        {% else %}
        {{ form.email(class_="form-control ", placeholder="Email") }}
        {% endif %}
    </div>
    
    <div class="form-group">
        {% if form.password.errors %}
        {{ form.password(class_="form-control is-invalid", placeholder="Password") }}
        <div class="invalid-feedback">
            {% for error in form.password.errors %}
            <span> {{ error }} </span>
            {% endfor %}
        </div>
        {% else %}
        {{ form.password(class_="form-control ", placeholder="Password") }}
        <span class="p-viewer"><i class="icon-eye" id="togglePassword" style="margin-left: 100px; cursor: pointer;"></i></span>
        {% endif %}
    </div>

    <div class="text-right mt-3">
        <a href="{{ url_for('main.index') }}" class="btn btn-link text-grey"><i class="icon-chevron-left"></i> Homepage </a>
        {{ form.submit(class="btn btn-primary", onclick='spinner()') }}
    </div>
</form>

JavaScript for Spinner:

<script>
        function spinner() {
            $('#spinner').modal('show');
            return true;
        }
        var FirstLoading = true;

        function RestoreSubmitButton() {
            if (FirstLoading) {
                FirstLoading = false;
                return;
            }
            $('#spinner').modal('hide');
        }
        document.onfocus = RestoreSubmitButton;
    </script>

Because I am using DataRequired() in the form, it is inserting a "required" element in the input field. When I click submit without data, it fires the spinner and then raises the info box:

My question is, is there a way to handle this conflict properly? Or is there a way to trigger the spinner to run after the validation process is complete?

Thanks

Answer 1

I just needed to put an id on the form instead of on the button.

So, I changed:

<div class="text-right mt-3">
        <a href="{{ url_for('main.index') }}" class="btn btn-link text-grey"><i class="icon-chevron-left"></i> Homepage </a>
        {{ form.submit(class="btn btn-primary", onclick='spinner()') }}
</div>

to:

<div class="text-right mt-3">
        <a href="{{ url_for('main.index') }}" class="btn btn-link text-grey"><i class="icon-chevron-left"></i> Homepage </a>
        {{ form.submit(class="btn btn-primary") }}
    </div>

and:

<form method="POST" acion="">

to:

<form method="POST" acion="" id="submit_id">

and added a bit of javascript:

 $(document).ready(function() {
        $("#submit_id").submit(function(e) {
            spinner();
        });
    });

Now, the spinner is not kicked off until after the form itself has had a chance to see if required fields are needed