Ir ao conteúdo
  • Cadastre-se

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


Posts recomendados

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á!

 

 

 

Tela_Reserva de veiculo.JPG

Code_Reserva de veiculo.JPG

Link para o comentário
Compartilhar em outros sites

@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.

Link para o comentário
Compartilhar em outros sites

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

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...