JQuery - Validar Formulario con Jquery Validator

 
Vista:
Imágen de perfil de Yordy Jiménez

Validar Formulario con Jquery Validator

Publicado por Yordy Jiménez (2 intervenciones) el 03/01/2018 14:35:10
Estoy trabajando en el proyecto de la Universidad y necesito validar un formulario de registro el cual e dividido en 3 partes (Información personal, laboral y de sesión) la cuestión es que como está dividido las 2 primeras partes son con un input type button mientras que la última es de tipo submit, la validación la estoy realizando con Jquery Validate pero solo puedo validar la última parte es decir el tipo submit, creo que debería utilizar la funcion valid al hacer click sobre el boton siguiente del tipo button pero no se como hacerlo.
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
Imágen de perfil de xve
Val: 377
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Validar Formulario con Jquery Validator

Publicado por xve (673 intervenciones) el 03/01/2018 18:49:23
Hola Yordy, no entiendo muy bien a que te refieres, ni como lo haces... nos puedes mostrar la parte del código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Yordy Jiménez

Validar Formulario con Jquery Validator

Publicado por Yordy Jiménez (2 intervenciones) el 03/01/2018 19:04:49
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
<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" novalidate 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" id="password" placeholder="Password">
    </div>
    <input type="button" name="siguiente" class="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="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="text" class="form-control" id="mob" 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
<script>
	$(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>


ese es el código la cuestión es que al momento de la validación mediante Jquery Validator no se como hacerlo con un input type button solo con submit
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar