Pure JS with flex

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 9 months ago

  Hi 👋

  Great work on this!

  The reason you're not seeing the must be a valid day error in the UI is because of the way you're using the if statements. At present, the user inputs the date, and then the JavaScript validates the data, first by checking if it is a valid day, then if it is a valid month etc. This is giving you an array of error messages errors. You then loop through the error messages, and set the error on the <small> element.

  The problem with this approach is that each message is being rendered on the same element. That means that the final UI will display whichever is the last error message in the array.

  You have two options here:

  If you want to show all the error messages in a list, then you need to create a new element in the JavaScript, and insert it into the DOM using JavaScript.

  let errorContainer = document.getElementById("error-container");
  if (errors.length > 0) {
      errors.forEach((error) => {
          const errorElement = document.createElement("small");
          errorElement.textContent = error.message;
          errorContainer.append(errorElement);
      });
  }
  

  A simpler option would be to only show whichever is the first validation error that occurs. To do that you should change your logic as such:

    let error;
    let inputDate = new Date(year, month - 1, day);
    if (day > 31 || day < 1) {
      error = { field: inputDay, message: "Must be a valid day" };
    } else if (month > 12 || month < 1) {
      error = { field: inputMonth, message: "Must be a valid month" };
    } else if (year > currentYear || year < 1) {
      error = { field: inputYear, message: "Must be in the past" };
    }
  

  Notice, using this approach you no longer need to maintain an array of error messages, but just a single message.

  Hope this helps at all 😀

  0

  ---

  

  Wismal•220

  @WismalPosted 9 months ago

  Hi,@jakegodsall :)

  Thanks for the feedback, I put an "if" statement to check if the day error is in the arrray, don't put the new error. So now everything should be ok.

  Your solutions are good but in the second one, it doesn't let me put more than one error. On the contrary, the first solution puts two errors in the day input.

  0

  

  P

  Jake Godsall•1,390

  @jakegodsallPosted 9 months ago

  @Wismal Hi, sorry for the late reply.

  I didn't notice you had already defined the elements to store the different validation methods in the HTML. My bad!

  In this case, here's a solution. You need a way to differentiate between the elements. I recommend adding unique id tags to each of them:

        <div class="dates">
            <label
              >DAY
              <input type="number" name="day" id="day" min="1" placeholder="DD" />
              <small class="hidden" id="error-message-day">----</small>
            </label>
            <label
              >MONTH
              <input type="number" name="month" id="month" placeholder="MM" />
              <small class="hidden" id="error-message-month">----</small>
            </label>
            <label
              >YEAR
              <input type="number" name="year" id="year" placeholder="YYYY" />
              <small class="hidden" id="error-message-year">----</small>
            </label>
          </div>
  

  Then, in JavaScript you can dynamically construct the ID based on the fields in the error array. Note for this to work, you need to change the field values in the error array to just string values like "day", "month", "year":

    // loop through all errors in the array
    errors.forEach(({ field, message }) => {
      // Construct the ID of the element where the message should be displayed
      const messageId = `error-message-${field}`;
      // Find the element by its ID
      const messageElement = document.getElementById(messageId);
      // Set the text content of the element to the message
      if (messageElement) {
        messageElement.textContent = message;
        messageElement.classList.remove("hidden");
      }
    });
  

  This way, the correct message will be displayed in the appropriate element.

  Hope this helps 😁

  Marked as helpful

  0