Flask WTForms 中带有 Javascript 的装载程序

Question

我试图在使用 WTForms 的 Flask 应用程序中包含一个带有 Javascript 的加载图标。 我将加载程序设置为onclick事件，该事件将加载程序设置为在单击按钮时显示。 问题是，即使表单未经过验证（IE 中没有任何内容），它也会在单击时显示加载程序。

通常我只会检查以下表格：

HTML：

<input type="submit" class="btn btn-outline-info" name="submit_button" value="Retrieve Data" onclick="test1()">
<div id='loader' class="loader"></div>

JS：

window.onload = function () {

         document.getElementById("loader").style.display = "none";
}
function test1() {
var user_input = document.getElementById('form').value;
if (user_input) {
    document.getElementById("loader").style.display = "block";
}
}

如何使用 Javascript 检查 WTForm 的值，而不是一直等待数据通过 Flask API

这是我的 WTForms 代码：

<div class="form-group">
{{ form.service.label(class="form-control-label") }} {% if form.service.errors %} {{ 
form.service(class="form-control form-control-lg
is-invalid")}}
<div class="invalid-feedback">
{% for errors in form.service.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %} {{ form.service(class="form-control form-control-lg") }} {% endif %}
</div>

Answer 1

据我了解，您正在尝试检查表单内的输入字段中是否有值。

我解释这一行：

document.getElementById('form').value;

就像你给它表单的 id 而不是你正在检查的输入字段。 你不能这样做，因为它总是会返回 false。

相反，您需要做的是从特定输入字段中获取值，而不是整个表单。

这意味着将您正在检查的输入字段的 id 插入到document.getElementById('insert input field id');