Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

177
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda