Problema al validar un formulario
Publicado por Master (1 intervención) el 04/01/2018 19:24:58
pase a la siguiente sección del formulario sin ser enviado al menos que llene las 3 etapas, lo he realizado con type="submit" porque no encuentro la manera de hacerlo con type="button" e igual no funciona, si alguien puede tomarse la molestia de guiarme para poder validar mi formulario se los agradecería, llevo 2 días en este plan =(
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar progress-bar-striped active"></div>
</div>
<form id="regiration_form" action="action.php" method="post">
<fieldset>
<h2>Paso 1 Registro</h2>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="contrasena">Contraseña</label>
<input type="password" class="form-control" name="pass" id="password" placeholder="Password">
</div>
<input type="submit" name="siguiente" class="valid siguiente btn btn-info" value="siguiente" />
</fieldset>
<fieldset>
<h2> Paso 2 información personal</h2>
<div class="form-group">
<label for="fName">Primer Nombre</label>
<input type="text" class="form-control" name="fName" id="fName" placeholder="Primer Nombre">
</div>
<div class="form-group">
<label for="lName">Segundo Nombre</label>
<input type="text" class="form-control" name="lName" id="lName" placeholder="Segundo Nombre">
</div>
<input type="button" name="atras" class="atras btn btn-default" value="atrás" />
<input type="button" name="siguiente" class="valid siguiente btn btn-info" value="siguiente" />
</fieldset>
<fieldset>
<h2>Paso 3: información de Contacto</h2>
<div class="form-group">
<label for="mob">Número telefónico</label>
<input type="telf" class="form-control" id="mob" name="phone" placeholder="Número telefónico">
</div>
<div class="form-group">
<label for="address">Dirección</label>
<textarea class="form-control" name="Dirección" placeholder="Dirección"></textarea>
</div>
<input type="button" name="atras" class="atras btn btn-default" value="atrás" />
<input type="submit" name="Enviar" class="Enviar btn btn-success" value="Enviar" />
</fieldset>
</form>
<div class="row">
<div class="col-md-11 col-md-offset-1">
<strong>Para este ejercicio de registro de formulario estamos usando la función <code>field-set control</code> nativa de HTML la cual busca donde termina un <code>fieldset</code> y el contenido lo coloca por etapas.
</div></div>
<style type="text/css">
#regiration_form fieldset:not(:first-of-type) {
display: none; }</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var form = $( "#regiration_form" );
$( ".valid" ).click(function(event) {
event.preventDefault();
form.validate({
rules: {
"email": {
required: true,
minlength:4},
"phone":{
required:true }},
messages: {
"email": {
required: "formato invalido"
},
"phone":{
required: "Debes tener un número correcto"
} }});
});
$(document).ready(function(){
var barra =true,paso_actual,etapa,etapas;
etapas = $("fieldset").length;
$(".siguiente").click(function(){
paso_actual = $(this).parent();
etapa = $(this).parent().next();
etapa.show();
paso_actual.hide();
asignarProgresoBarra(++barra);
});
$(".atras").click(function(){
paso_actual = $(this).parent();
etapa = $(this).parent().prev();
etapa.show();
paso_actual.hide();
asignarProgresoBarra(--barra);
});
asignarProgresoBarra(barra);
// Change progress bar action
function asignarProgresoBarra(progreso){
var percent = parseFloat(100 / etapas) * progreso;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}});
</script>
- form-for-step.rar(8,3 KB)
Valora esta pregunta
0