Validar form com validate() e depois usar $(this).parents('.form-step').hide().next().show();
POR FAVOR, PODE ME AJUDAR URGENTE!!!
Segue o html e as dúvidas então comentadas no javascript
/*estou com conflito, com de processo e execução dos itens
* dessa forma validate funcionada
*$('.next-step').click(function () {
$("#step_1").validate();
});
não estou saber fazer a chamada do $(this).parents('.form-step').hide().next().show();, só após os
campor obrigatórios estiverem OK, via validate()
*/<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- mascara de input -->
<script src="https://rawgit.com/digitalBush/jquery.maskedinput/1.4.0/dist/jquery.maskedinput.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin:30px 0">
<div class="col-lg-3">
<img src="img/logo.png" class="img-thumbnail"> </div>
<div class="col-lg-9">
<h3>Nome do Produto</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6" id="form-container">
<form id="step_1" class="form-step" action="javascript:void(0);">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
Preencha seus dados para receber contato </div>
</div>
<div class="panel-body">
<fieldset>
<div class="row form-group">
<div class="col-lg-6">
<label>Nome Completo</label> <input class="form-control" type="text" name="nome" id="nome" required> </div>
<div class="col-lg-6">
<label>Data de Nascimento</label> <input class="form-control" type="text" id="data_nascimento" name="data_nascimento"> </div>
</div>
<div class="row form-group">
<div class="col-lg-6">
<label>Email</label> <input class="form-control" type="text" name="email" id="email" required> </div>
<div class="col-lg-6">
<label>Telefone</label> <input class="form-control" type="text" id="telefone" name="telefone"> </div>
</div>
<div>
<button type="submit" class="btn btn-lg btn-info next-step xxx">Próximo Passo</button> </div>
</fieldset>
</div>
</div>
</form>
<form id="step_2" class="form-step" style="display:none">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
Preencha seus dados para receber contato </div>
</div>
<div class="panel-body">
<fieldset>
<div class="row form-group">
<div class="col-lg-6">
<label>Região</label> <select class="form-control" name="regiao">
<option value="">Selecione a sua região</option>
<option>Sul</option>
<option>Sudeste</option>
<option>Centro-Oeste</option>
<option>Nordeste</option>
<option>Norte</option>
</select> </div>
<div class="col-lg-6">
<label>Unidade</label> <select class="form-control" name="unidade">
<option value="">Selecione a unidade mais próxima</option>
<option>???</option>
</select> </div>
</div>
<div>
<button type="submit" class="btn btn-lg btn-info next-step">Enviar</button> </div>
</fieldset>
</div>
</div>
</form>
<div id="step_sucesso" class="form-step" style="display:none">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
Obrigado pelo cadastro! </div>
</div>
<div class="panel-body">
Em breve você receberá uma ligação com mais informações! </div>
</div>
</div>
</div>
<div class="col-lg-6">
<h1>Chamada interessante para o produto</h1>
<h2>Mais uma informação relevante</h2>
</div>
</div>
</div>
<script>
$(function() {
$("#step_1").validate({
rules: {
nome: {
required: true,
minlength: 3
},
email: {
required: true
}
},
messages: {
nome: {
required: "Por favor, informe seu nome",
minlength: "O nome deve ter pelo menos 3 caracteres"
},
email: {
required: "É necessário informar um email"
}
}
});
$("#data_nascimento").mask("99/99/9999");
$("#telefone").mask("(99) 9999-9999?9");
}); /*----- parte que ja é do html original------*/
/*estou com conflito, com de processo e execução dos itens
* dessa forma validate funcionada
*$('.next-step').click(function () {
$("#step_1").validate();
});
não estou saber fazer a chamada do $(this).parents('.form-step').hide().next().show();, só após os
campor obrigatórios estiverem OK, via validate()
*/
$('.next-step').click(function(event) {
event.preventDefault();
$("#step_1").validate();
$(this).parents('.form-step').hide().next().show();
});
</script>
<script src="jquery.validate.js"></script>
</body>
</html>Discussão (1)
Carregando comentários...