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');