Загрузчик с Javascript в Flask WTForms - PullRequest
0 голосов
/ 10 июля 2020

Я пытаюсь включить значок загрузки с Javascript в свое Flask приложение, которое использует WTForms. У меня есть загрузчик, настроенный как событие 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";
}
}

Как я могу проверить значение WTForm с помощью Javascript, НЕ прибегая к ожиданию, пока данные пройдут весь путь через 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>

1 Ответ

1 голос
/ 10 июля 2020

Насколько я понимаю, вы пытаетесь проверить, есть ли значение в поле ввода, которое находится внутри формы.

Я интерпретирую эту строку:

document.getElementById('form').value;

как будто вы даете ему идентификатор формы, а не проверяемое поле ввода. И вы не можете этого сделать, потому что он всегда будет возвращать false.

Вместо этого вам нужно получить значение из указанного c поля ввода, а не всей формы.

Это означает вставку идентификатора проверяемого поля ввода в document.getElementById('insert input field id');

...