JavaScript 微调器与使用 WTForms 的输入 "required" 属性冲突

Question

我正在使用 Flask，并且在登录页面上有一些基本元素。路由、表单和模板。我还有一个在提交表单时触发的微调器。

我运行遇到问题的地方是有人没有填写信息，而是点击提交。基本上，会触发微调器，但也会触发警告用户填写字段的信息提示，从而导致微调器卡住旋转。

表格：

class LoginForm(FlaskForm):

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

路线：

@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")

模板：

<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 微调器：

<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>

因为我在表单中使用 DataRequired()，所以它在输入字段中插入了一个“必需”元素。当我在没有数据的情况下单击提交时，它会触发微调器，然后显示信息框：

我的问题是，有没有办法妥善处理这种冲突？或者有没有办法在验证过程完成后将微调器触发到运行？

谢谢

Answer 1

我只需要在表单而不是按钮上放置一个 id。

所以，我改变了：

<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>

至：

<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>

和：

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

至：

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

并添加了一点 javascript:

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

现在，直到表单本身有机会查看是否需要必填字段后，微调器才会启动

JavaScript 微调器与使用 WTForms 的输入 "required" 属性冲突

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

javascript

flask

flask-wtforms