Блог

Главная - Вопросы по программированию - Есть ли способ добавить сообщение об ошибке для отображения на веб-странице с помощью Javascript?

Есть ли способ добавить сообщение об ошибке для отображения на веб-странице с помощью Javascript?

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь добавить обработку сообщений об ошибках в Javascript, но у меня возникли проблемы. Если пользователь вводит состояние длиной не два символа, я пытаюсь заставить его вывести сообщение об ошибке. Я также включаю свою функцию renderBarChart, если это поможет.

js

 stateSubmitButton.addEventListener("click", function(event) {
    event.preventDefault();
    state = stateUserInput.value.toUpperCase();
    let stateFeedbackElem = document.querySelector("#stateFeedback");
    if (state.length == 2) {
        stateUserInput.setCustomValidity("");
        stateFeedbackElem.textContent = "";
        renderBarChart(state);
        state = "";
    } else {
        stateUserInput.setCustomValidity("Please enter a two letter abbreviated state.");
        stateFeedbackElem.textContent = "Please enter a two letter abbreviated state.";
        state = "";
    }
})

HTML

  <form class="form" novalidate>
    <label for="state-input">State:</label> 
    <input name="state" type="text" id="state-input" placeholder="(i.e. WA)">
    <button type="submit" id="state-submit" class="btn btn-dark btn-lg ml-2">Submit</button>
    <div id="stateFeedback" class="invalid-feedback"></div>
</form>

Комментарии:

1. Что за проблема или проблема?

2. К сожалению, сообщение об ошибке никогда не отображается!

3. renderBarChart is not defined

4. Я действительно определил его! Я просто включил его в код, и я знаю, что это работает, потому что все функционирует. Просто не мои сообщения об ошибках.

5. теперь — dataSet is not defined

Ответ №1:

Я заметил пару проблем.

Вы установили novalidate в своей форме, что означает .setCustomValidity() , что ошибка не будет отображаться, поскольку проверка не будет выполнена.

Если novalidate атрибут установлен для <form> элемента, интерактивная проверка ограничений не выполняется.

— Проверка ограничений

Если stateUserInput это #state-input ввод, .textContent он должен работать, и текст должен быть установлен. Но, вероятно, оно не отображается, поскольку invalid-feedback класс имеет свойство CSS display: none; . Вам нужно добавить d-block класс или использовать invalid-feedback элемент, как показано в примерах начальной загрузки.

И просто примечание: предпочитайте добавлять прослушиватель событий в форму и прослушивать SubmitEvent вместо click события на кнопке отправки.