I have the following form:
<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>
Inside the form I have 2 buttons of Previous and next: The drawback I have is that by clicking on the previous button, you must return to the previous view without validating the form and giving it in next if you must validate the form to continue to the next view. I have the functions in this way:
$('#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'
});
});
The detail arises when you validate the form, enter the submitHandler but do not send the path vistas/formaspagos.html
, if not send it to vistas/proforma.html
, it is as if you first execute the Previous button.
How could I correct this.
Thank you very much.