Is there a way to add an error message to show up on webpage using Javascript?

Question

I am trying to add error message handling in Javascript but am having trouble. If a user inputs a state that is not two characters in length, I am trying to have it output an error message. I also am including my renderBarChart function too if that helps.

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>

I actually do have it defined! I just included it in the code, and I know it works because everything is functioning. Just not my error messages. — zhengruqing, Nov 06 '20 at 06:44
I actually have that defined too! I just didn't paste the entirety of my code. Just the relevant parts. — zhengruqing, Nov 06 '20 at 06:49
Hmm, I'm only really looking for help to modify my error output to be displayed on the webpage, when the entered abbreviated state is incorrect. It has to do with only the submit button event listener in my js and the portion of code in my html to render my error message to be displayed. — zhengruqing, Nov 06 '20 at 06:54
I don't get an error message. I want to be able to display an error message for validity concerns to people interacting with my app :) — zhengruqing, Nov 06 '20 at 06:55

score 1 · Accepted Answer · answered Nov 06 '20 at 08:51

I noticed a couple of problems.

You have set novalidate on your form, which means .setCustomValidity() error will not be shown as validation will not be performed.

If the novalidate attribute is set on the <form> element, interactive validation of the constraints doesn't happen.

-- Constraint validation

If stateUserInput is the #state-input input, .textContent should work, and the text should be set. But it is probably not shown as the invalid-feedback class has CSS property display: none;. You need to add a d-block class or use invalid-feedback element as shown in Bootstrap examples.

And just a note, prefer to add an event listener on the form and listen for the SubmitEvent instead of the click event on the submit button.

Is there a way to add an error message to show up on webpage using Javascript?

1 Answers1