JQuery - Problema al validar un formulario

   
Vista:

Problema al validar un formulario

Publicado por Master (1 intervención) el 04/01/2018 19:24:58
Hola compañeros se que ayer registré un foro muy parecido pero necesito de toda la ayuda posible ya he avanzado mucho desde ayer, verán estoy tratando de crear un formulario en 3 etapas en donde al dar click al primer botón de tipo submit 1) Realice un prevent default para prevenir la acción por defecto, 2) me valide mediante JqueryValidator los campos en busca de errores y 3)
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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Revisar política de publicidad