'DropDown Input Validation

i'm trying to code simple input validation, but it acts pretty weird - when i select date that already passed it's ok, when i select valid date it's ok, but after if i select invalid date, it's acting like it's valid. Only solution i came up with was reloading page, but that's stupid...

const days = document.getElementById("day");
const time = document.getElementById("time");
const err = document.getElementById("err")

var today = new Date();
var hour = today.getHours();
var day = today.getDay();

function checkForValidInput()
{
  if (days.value > day)
  { 
    UI()
  }
  else if(days.value === day && time.value > hour)
  {
    
    UI()
  }
  else 
  {
    err.innerText = "Please select valid date / time";
  }
}



<div class="movie-container">
  <label> Select a Date:</label>
  <select onchange="checkForValidInput()" id="day">
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
    <option value="7">Sunday</option>
  </select>
</div>
<div class="movie-container">
  <label> Select a time:</label>
  <select onchange="checkForValidInput()" id="time">
    <option value="10">10:00</option>
    <option value="12">12:00</option>
    <option value="14">14:00</option>
    <option value="16">16:00</option>
    <option value="18">18:00</option>
    <option value="20">20:00</option>
  </select>
</div>
javascripthtmlvalidation


Solution 1:[1]

from you code, I see there are no function to reset the element when the next selection is valid or not. you can try like this

const days = document.getElementById("day");
const time = document.getElementById("time");
const err = document.getElementById("err")

var today = new Date();
var hour = today.getHours();
var day = today.getDay();

function checkForValidInput() {
  if (days.value > day) {
    UI()
  } else if (days.value === day && time.value > hour) {
    UI()
  } else {
    err.innerText = "Please select valid date / time";
    // reset valid element because now invalid
    valid.innerText = "";
  }
}

function UI() {
  valid.innerText = "valid date / time";
  // when valid hide error message
  err.innerText = "";
}
<div class="movie-container">
  <label> Select a Date:</label>
  <select onchange="checkForValidInput()" id="day">
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
    <option value="7">Sunday</option>
  </select>
</div>
<div class="movie-container">
  <label> Select a time:</label>
  <select onchange="checkForValidInput()" id="time">
    <option value="10">10:00</option>
    <option value="12">12:00</option>
    <option value="14">14:00</option>
    <option value="16">16:00</option>
    <option value="18">18:00</option>
    <option value="20">20:00</option>
  </select>
</div>
<p id="err"></p>
<p id="valid"></p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 uingtea

Related Questions