tengo el siguiente formulario:
<form id="form_telefonoadicional">
<div class="list-block no-hairlines">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Número de teléfono</div>
<div class="item-input">
<input type="text" name="telefono" id="telefono" required />
</div>
<div class="item-text input-error"></div>
</div>
</div>
</li>
<li class="align-top">
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Correo Electronico</div>
<div class="item-input">
<input type="text" name="correo" id="correo" required />
</div>
<div class="item-text input-error"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<span class="col-50 button-icon-ant" data-icon="">
<button class="regresarProforma">Anterior</button>
</span>
<span class="col-50 button-icon" data-icon="">
<button type="submit" id="formasPagos" class="">Siguiente</button>
</span>
</div>
</div>
</form>
Dentro el formulario tengo 2 botones de Anterior y siguiente: El inconveniente que tengo es de que al dar click en el boton anterior, debe regresar a la vista anterior sin validar el formulario y al darle en siguiente si debe validar el formulario para continuar a la siguiente vista. Las funciones las tengo de esta forma:
$('#form_telefonoadicional').validate({
rules:{
telefono:{
required: true
}
},
messages:{
telefono:{
required: "Este campo es requerido"
}
},
submitHandler: function(form,e){
console.log("formulario validado");
mainView.router.load({
url: 'vistas/formaspagos.html'
});
e.preventDefault();
}
});
$$(".regresarProforma").on('click', function (e) {
mainView.router.load({
url: 'vistas/proforma.html'
});
});
El detalle surge cuando ya valida el formulario, ingresa al submitHandler pero no envía a la ruta vistas/formaspagos.html
, si no que lo envía a vistas/proforma.html
, es como si primero ejecutara el botón Anterior.
Como podría corregir esto.
Muchas gracias.