Error message rendering multiple times - each time submit button is pressed with empty input field & the error messages remain even after input

Question

I am finishing up my coding for a quiz app where questions are rendered one at a time and then finally the results table is rendered. Users can submit score and name to a scoreboard on another page. When the name input field is empty and the submit button is pressed, an error message is triggered. It was working fine if I did an alert

`else {
    alert("Please input your your name before submitting your score");
  }`

However, I don't want an alert. I want something a bit nicer so I did the following code. But every time button is submitted, the error is seen and then there ends up being multiple messages AND it doesn't go away even after the input field is populated. IDEALLY, I would like the error to render under the input field and not the submit button but I am fine, if this is not possible. Everything else works fine.

fname is the input field

renderHighScores has been declared elsewhere.

const handleResultsForm = (event) => {
  event.preventDefault();

  //get name from form
  const fullName = document.getElementById("fname").value;

  if (fullName) {
    const yourScore = {
      userName: fullName,
      score: timerValue,
    };

    const highScores = readFromLocalStorage();

    //push score object into LS
    highScores.push(yourScore);

    highScores.sort((a, b) => b.score - a.score);

    writeToLocalStorage("highscores", highScores);

    // render high scores page
    renderHighScores();
  } else {
    //if name input is empty show error message
    const nameInput = document.createElement("p");
    nameInput.setAttribute("class", "confirm-name");
    nameInput.setAttribute("id", "error-name");
    nameInput.textContent = "Please enter your name";

    const fullName = document.getElementById("submit-to-high-scores-button");
    fullName.appendChild(nameInput);
  }
};


  // add submit event handler to form
  submitScoresBtn.addEventListener("click", handleResultsForm);

trincot · Accepted Answer · 2022-12-06 20:12:21Z

1

I would suggest creating the error message element upon page load, but hidden. Then when you want to show it, just change its display style. And as soon as the user starts typing, hide it again.

// Create the error element at page load
const nameInput = document.createElement("p");
nameInput.setAttribute("class", "confirm-name");
nameInput.setAttribute("id", "error-name");
nameInput.textContent = "Please enter your name";
nameInput.style.display = "none"; // But hide it
const fullName = document.getElementById("submit-to-high-scores-button");
fullName.appendChild(nameInput);

const handleResultsForm = (event) => {
  event.preventDefault();

  //get name from form
  const fullName = document.getElementById("fname").value;
  // Set the visibility of the error message
  nameInput.style.display = fullName ? "none" : "";

  if (fullName) {
    const yourScore = {
      userName: fullName,
      score: timerValue,
    };

    const highScores = readFromLocalStorage();

    //push score object into LS
    highScores.push(yourScore);

    highScores.sort((a, b) => b.score - a.score);

    writeToLocalStorage("highscores", highScores);

    // render high scores page
    renderHighScores();
  }
};

// add submit event handler to form
submitScoresBtn.addEventListener("click", handleResultsForm);

// Hide the error message when user edits the name.
document.getElementById("fname").addEventListener("input", () => {
    nameInput.style.display = "none";
});

answered Dec 6, 2022 at 20:12

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

N S Over a year ago

Hi. I moved the create error element to the page load but now I'm receiving an error message ` Uncaught TypeError: Cannot read properties of null (reading 'appendChild')` - I think it's because the #submit-to-high-scores-button (for docment.getElementById) is created within the same function?

trincot Over a year ago

You have to make sure the script executes when the page is loaded, so make sure the script is at the bottom of the page, when the document is ready.

N S Over a year ago

Forgot to say I just added const nameInput = document.getElementById("error-name"); to the handleResultsForm just before the ternary operator to make it work. In case anyone else comes across the post.

trincot Over a year ago

It is there as a global variable.

trincot Over a year ago

There must be something different then at your end. Did you put the initial lines of code inside a function maybe?

|

Collectives™ on Stack Overflow

Error message rendering multiple times - each time submit button is pressed with empty input field & the error messages remain even after input

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related