Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde!
Estou desenvolvendo um site de uma agência de viagem para fixar meu conhecimento em javascript, html e css. Porém gostaria de colocar uma restrição no tópico "data de ida" que o usuário só prosseguia para a próxima página se no campo "Data de ida" tivesse um determinado valor no caso uma data. Iria aparecer um modal com uma mensagem de erro dizendo que é obrigatório colocar uma data. Gostaria de saber como consigo fazer essa validação utilizando javascript?
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Passagens Aéreas</h1>
</div>
</div>
<div class="row justify-content-center mb-5">
<div class="col-sm-12 col-md-10 col-lg-8">
<form name="consulta" method="post">
<div class="form-row">
<div class="form-group col-sm-6">
<label for="escolhaDataIda">Escolha Data de Ida:</label>
<input type="date" id="escolhaDataIda" class="form-control" name="dataida">
</div>
<div class="form-group col-sm-6">
<label for="escolhaDataVolta">Escolha Data de Volta:</label>
<input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
</div>
<div class="form-group col-sm-12">
<a href="listaderesultados.html">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal" id="erroModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Eco Aero - Viagens</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sucess" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
showModal = function(mensagem, callback){
$('#erroModal').find('.modal-body').text(mensagem);
$('#erroModal').find('.modal-footer .btn').click(callback);
$('#erroModal').modal('show');
}
function validacaoida () {
if (document.cadastro.dataida.value == "") {
showModal ("Por favor, coloque uma data de ida para prosseguir.", function(){
document.cadastro.dataida.focus ();
});
return false;
}
return true;
}Carregando comentários...