JQUERY: Почему ни одно из моих предупреждений не появляется, когда одно из моих условий соответствует истине? - PullRequest
Новая
       10

JQUERY: Почему ни одно из моих предупреждений не появляется, когда одно из моих условий соответствует истине?

1 голос
/ 22 апреля 2020

Мои оповещения не отображаются, когда я нажимаю кнопку отправки.

Div «Ошибка» должен предупреждать, когда есть пустое обязательное поле, и Div «Успех» должен предупреждать прямо перед отправкой формы. Форма отправляется, поэтому я знаю, что проверка правильности работает, но я не вижу ни одного из моих предупреждений. Смотрите код ниже: 

const goaForm = document.getElementById('goa-form');
let formCompleted = $.trim($('#goa-form input[required]').val()) == !'';
let formIncomplete = $.trim($('#goa-form input[required]').val()) == '';
let success = document.getElementById('success-msg');
let error = document.getElementById('error-msg');

let submitButton = document.getElementById("btnSubmit");

function checkForm() {
    if (formCompleted) {
        success.style.visibility = 'visible';
        goaForm.submit();
    } else if (formIncomplete) {
        error.style.visibility = 'visible';
        $("#error-msg").fadeOut(28000);
        return false;
    }
}
submitButton.addEventListener("click", checkForm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="error-msg" style="visibility: hidden;" class="alert alert-danger" role="alert">
<span class="fs-14">Error message div</span></div>

<div id="success-msg" style="visibility: hidden;" class="alert alert-success" role="alert">
<span class="fs-15">Success!</span></div>

// Submit Button
<button onclick="checkForm()" id="btnSubmit" class="btn btn-success lift d-flex align-items- 
 center" type="submit">Submit my application <i class="fe fe-arrow-right ml-5"></i>
</button>

Спасибо за помощь, ребята.

1 Ответ

1 голос
/ 22 апреля 2020

checkForm() срабатывает при нажатии кнопки, но при загрузке страницы используются значения (formCompleted, formIncomplete), определенные ранее. Таким образом, вы можете заполнить форму, но эти переменные не обновляются, и при нажатии кнопки используются старые значения, которые были установлены при первой загрузке страницы.

Вместо этого проверьте состояния ввода и определите эти переменные внутри вашей checkForm() функции, чтобы они были настроены как фактические, текущие результаты при нажатии кнопки. Затем тесты оценивают, как выглядит форма во время нажатия кнопки. 

function checkForm() {
    let formCompleted = $.trim($('#goa-form input[required]').val()) == !'';
    let formIncomplete = $.trim($('#goa-form input[required]').val()) == '';
    // ... rest of your code ...

Обновление

Вот работающий JSFiddle .

Примечания:

  • Вы используете сочетание простых JS и jQuery. В этом нет ничего технически неправильного, но, конечно, было бы легче читать и поддерживать, если бы вы придерживались одного. Если вы собираетесь принять удар при загрузке jQuery (дополнительный запрос http, лишний дополнительный ресурс 90 КБ и т. Д. c), вы также можете использовать его.

  • Я не являюсь конечно, если он действительно недействителен, но тест formCompleted кажется неправильным. Я бы использовал стандартный !== '' вместо == !'' (я сделал это в JSFiddle);

  • Если вы собираетесь использовать сравнение типов для formCompleted, вы должны быть последовательны, а также использовать это для formIncomplete, ie использовать === '' (я сделал это в JSFiddle);

  • Не используйте оба встроенных onClick() на кнопке, и добавьте addEventListener в ваш JS. Они оба делают одно и то же, используют только один из них. Смешивать JS с вашим HTML считается плохой практикой, поэтому лучше использовать обычный JS addEventListener (или jQuery .on()). Я удалил встроенный из JSFiddle.

...