Estoy tratando de codificar una validación de entrada simple, pero actúa bastante extraño: cuando selecciono la fecha que ya pasó, está bien, cuando selecciono una fecha válida, está bien, pero después, si selecciono una fecha no válida, actúa como si fuera válido. La única solución que se me ocurrió fue recargar la página, pero eso es estúpido...
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>
de su código, veo que no hay una función para restablecer el elemento cuando la siguiente selección es válida o no. puedes probar así
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>