how to check the <input type=date> in js?

Asked

Viewed 1,328 times

0

I am making a form and I wish it was not possible to advance if the date field had not been filled in, however I do not know how to pass the parameters for such verification, the verification should be done in JS.

  <label for="nasc">Data de nascimento:</label>
        <input type="date" id="nasc" name="nasc" min= "1990-12-30"max="2001-12-30"  />

javascript html

  • You do not want to allow to advance at the click of a button?

  • I want that when the person presses send and that field has not been filled in should still appear an Alert saying that there is an error.

  • Try to run my example or the Leandrade and see which one adapts to your need. The difference is the call of JS for the validation.

3 answers

2

This is quite simple, in a basic way you can pick up if the field is empty using a if and treat the message to each event of Blur in the field:

let valor = document.getElementById('nasc');

valor.onblur = function() {
  if(valor.value == '') {
    valor.style.borderColor = 'red';
    alert('Preencha este campo!');
  } else {
    valor.style.borderColor = 'green';
    alert('OK! Campo preenchido.');
  }
}
<label for="nasc">Data de nascimento:</label>
<input type="date" id="nasc" name="nasc" min="1990-12-30" max="2001-12-30" />

2


  
    function validarData(){
    	var data = document.getElementById("nasc");
    	if(data.value == ''){
    		alert("Data não preenchida!");
    		return;
    	}
    }
<!DOCTYPE html>
    <html>
    <head>
    <title>Da11a2 Exemplo</title>
   
    </head>
    <body>
    
    <label for="nasc">Data de nascimento:</label>
            <input type="date" id="nasc" name="nasc" min= "1990-12-30"max="2001-12-30"  />
            
            <button onClick="validarData()"> Enviar </button>
    
    </body>
    </html>

You can do this validation by clicking the desired button to send your form, in this case the Send button. I made a simple example where a validation is made if the field has not been filled in, in this case an alert is invoked.

<!DOCTYPE html>
<html>
<head>
<title>Da11a2 Exemplo</title>

<script>

function validarData(){
    var data = document.getElementById("nasc");
    if(data.value == ''){
        alert("Data não preenchida!");
        return;
    }
}
</script>

</head>
<body>

<label for="nasc">Data de nascimento:</label>
        <input type="date" id="nasc" name="nasc" min= "1990-12-30"max="2001-12-30"  />

        <button onClick="validarData()"> Enviar </button>

</body>
</html>

1

A simple solution, restricted to native features and only with javascript, is to add an event in the focus of the form controls, add the property required in its date of birth input and using the method checkValidity().

let inputNasc = document.getElementById("nasc");
let controles = document.getElementById("formulario").elements;

//método de validação
let validarNascimento = function() {
  if (this != inputNasc && !inputNasc.checkValidity()) {
    alert("Primeiro, informe a sua data de Nascimento");
    inputNasc.focus();
  }
}

//Bind dos eventos
for (let i = 0; i < controles.length; i++) {
  controles[i].onfocus = validarNascimento;
}
<form id="formulario">
  <label for="nasc">Data de nascimento:</label>
  <input type="date" id="nasc" name="nasc" min="1990-12-30" max="2001-12-30" required />
  
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">
</form>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.