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 而不是你正在检查的输入字段。你不能那样做，因为它总是 return false。

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

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

Flask WTForms 中带有 Javascript 的加载程序

Loader with Javascript in Flask WTForms

javascript

flask

flask-wtforms