Skip to content

Instantly share code, notes, and snippets.

@mingomax

mingomax/reservas.html

Created November 10, 2011 23:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mingomax/1356616 to your computer and use it in GitHub Desktop.
Save mingomax/1356616 to your computer and use it in GitHub Desktop.
Download ZIP
Html com validação em Jquery
Raw
reservas.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em;}
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: middle; }
</style>
<title>Reservas</title>
</head>
<body>
<h1>Reserva de Hotel</h1>
<form action="#" method="post" id="frm_cadastro">
<fieldset>
<legend>Dados Pessoais</legend>
<p>
<em>*</em><label for="txtNome">Nome:</label>
<input type="text" value="" name="txtNome" id="txtNome" />
</p>
<p>
<em>*</em><label for="txtSobrenome">Sobrenome:</label>
<input type="text" value="" name="txtSobrenome" id="txtSobrenome" />
</p>
<p>
<span><em>*</em>Sexo:</span></br>
<label for="radioMasculino">Masculino</label>
<input type="radio" name="sexo" value="m" id="radioMasculino" />
<label for="radioFeminino">Feminino</label>
<input type="radio" name="sexo" value="f" id="radioFeminino" />
</p>
<p>
<em>*</em><label for="txtDataNascimento">Data de nascimento:</label>
<input type="text" value="" name="txtDataNascimento" id="txtDataNascimento" />
</p>
</fieldset>
<fieldset>
<legend>Dados do Quarto</legend>
<p>
<em>*</em><label for="txtQuantidadeDePessoas">Quantidade de pessoas:</label>
<input type="text" value="" name="txtQuantidadeDePessoas" id="txtQuantidadeDePessoas" />
</p>
<p>
<em>*</em><label for="selTipoDoQuarto">Tipo do quarto:</label>
<select id="selTipoDoQuarto" name="selTipoDoQuarto">
<option value="#">Selecione</option>
<option value="1">Simples</option>
<option value="2">Duplo</option>
<option value="3">Especial</option>
<option value="4">Luxo</option>
</select>
</p>
</fieldset>
<fieldset>
<legend>Dados para Pagamento</legend>
<p>
<em>*</em><span>Bandeira do Cartão:</span><br/>
<label for="radioCartaoVisa">Visa</label>
<input type="radio" name="cartao" value="visa" id="radioCartaoVisa" />
<label for="radioCartaoMaster">Mastercard</label>
<input type="radio" name="cartao" value="master" id="radioCartaoMaster" />
<label for="radioCartaoDinners">Dinners</label>
<input type="radio" name="cartao" value="dinners" id="radioCartaoDinners" />
</p>
<p>
<label for="txtCartaoDeCredito">Número do Cartão de Crédito</label>
<input type="text" value="" name="txtCartaoDeCredito" id="txtCartaoDeCredito" />
</p>
</fieldset>
<p>
<input id="bt_submit" type="submit" value="Reservar" />
<input type="reset" value="Limpar" />
</p>
</form>
<script type="text/javascript">
$(document).ready(function(){
//Validar Catalogo de Pacotes de Lances
$('#frm_cadastro').validate({
rules: {
'txtNome': {
required: true,
minlength: 3
},
'txtSobrenome': {
required: true,
minlength: 3
},
'sexo': "required",
'txtDataNascimento': {
required: true,
dateBR: true
},
'txtQuantidadeDePessoas': {
required: true,
range: [1,10]
},
'selTipoDoQuarto' : {
required: true
},
'cartao': {
required: true
},
'txtCartaoDeCredito': {
required: true,
credicard: true,
maxlength: 16
}
},
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
errorLabelContainer: $("#catalogo-pacote-lances label.error"),
submitHandler: function(form) {
alert('Formulário validado');
},
// define messages para cada campo
messages: {
'txtNome': {
required: 'Campo obrigatório',
minlength: 'Este campo deve ter no mínimo 3 caracteres.'
},
'txtSobrenome': {
required: 'Campo obrigatório',
minlength: 'Este campo deve ter no mínimo 3 caracteres.'
},
'sexo': {
required: 'Escolha o sexo'
},
'txtDataNascimento': {
required: 'Campo obrigatório',
dateBR: "Informe uma data válida (dd/mm/aaaa)"
},
'txtQuantidadeDePessoas': {
required: 'Campo obrigatório',
range: 'O minino de pessoa em um quarto é 1 e o máximo é 10'
},
'selTipoDoQuarto' : {
required: 'Campo obrigatório'
},
'cartao': {
required: 'Campo obrigatório'
},
'txtCartaoDeCredito': {
required: 'Campo obrigatório',
credicard: 'Cartão inválido',
maxlength: 'Seu número de cartão deve ter no máximo 16 números'
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment