Outro Validar DateTime com o campo radio. (HTML e JAVASCRIPT)

Tiagodeoliveira · 22 de julho de 2021

Bom dia pessoal, tudo bem?

Estou desenvolvendo um formulário simples de reserva de veiculo e preciso validar duas informações: data e hora (datetime) e veiculo (campo radio) para que não ocorra duplicação de reserva. Como posso tratar essas informações?

Em anexo tem a imagem do código e a tela dos campos para validação.

Agradeço desde já!

Simon Viegas · 22 de julho de 2021

@Tiagodeoliveira, por favor, poste o texto do código código.

Adendo: favor usar o botão CODE (ícone <> na barra de ferramentas).

Tiagodeoliveira · 22 de julho de 2021

@Simon Viegas perfeito, vou corrigir.

<div class="panel panel-primary"> <!--inicio panel-->
			<div class="panel-heading">
			    <h3 class="panel-title"></i>Informações da Reserva</h3>
			</div>
			<div class="panel-body">
				<div class="row">
						<div class="form-group col-md-2">
							<label for="datahorareserva">Data e hora</label>
							<input type="text" name="datahorareserva" class="form-control" id="datahorareserva" placeholder="Data e Hora">	
						</div>
					<div class="row">
						<div class="form-group col-md-4">
							<label for="veiculo">Veiculo</label>	
							<div class="radio">
								<label><input type="radio" name="veiculo" id="veiculo" value="cruze"> Cruze </label>
							    <label><input type="radio" name="veiculo" id="veiculo" value="match"> Match</label>
							    <label><input type="radio" name="veiculo" id="veiculo" value="montana"> Montana</label>
							    <label><input type="radio" name="veiculo" id="veiculo" value="punto"> Punto</label>
							    <label><input type="radio" name="veiculo" id="veiculo" value="master"> Master</label>
						    </div>	
						</div>
					</div>
					<div class="form-group col-md-12">
							<label for="informações">Informações sobre a Viagem:</label>
							<textarea name="informações" class="form-control" id="informações" rows="5" 
							placeholder="Digite informações relacionado á viagem como: Destino, Motivo e etc."></textarea>
					</div>
				</div>
			</div>
		</div> <!-- Fim panel -->
</form>
</div>
</body>
<script type="text/javascript">
	var dateTime = FLUIGC.calendar('#datahorareserva', {
	    pickDate: true,
	    pickTime: true,
	    sideBySide: true
	});
</script>

Codigo HTML e js dos campos para validação.

Rui Guilherme · 23 de julho de 2021

Citação

para que não ocorra duplicação de reserva

Você se refere a duas pessoas diferentes realizar a mesma reserva no mesmo horario?

Se for o caso então você precisa usar o formado de hora Date e Time no formulário:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Destaco que desde de 2015 não existe mais o datetime: https://github.com/whatwg/html/issues/336

Antes de realizar a reserva é só verificar no banco de dados se existe alguma reserva feita na mesma data e horario, feito isso é só salvar a reserva e notificar o usuario que foi feita com sucesso.

Acredito que seja uma boa pratica fazer o front-end já desativar os horarios já pegos, porém deve ser feito uma checagem antes de salvar para evitar "problemas."

Vale lembrar que calcular e checar as diferenças de dias e horas entre duas datas não é algo tão difícil de ser feito, recomendo ler um pouco sobre o Objeto Global de Date do JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date