Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

173
Vistas
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>
about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

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>

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda