0

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="&#xf053;">
                        <button class="regresarProforma">Anterior</button>
                    </span>
                    <span class="col-50 button-icon" data-icon="&#xf054;">
                        <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.

1 respuesta 1

1

Es por el tipo del boton:

 <button type="submit">

Quita el type="submit" y dejalo como button sino al hacer click el comportamiento del tipo submit es enviar el formulario y por ende se ejecuta el validate.

Saludos.

3
  • Gracias, me ha funcionado al momento de darle click al boton siguiente, pero cuando he terminado de llenar los campos y presiono enter, ejecuta primero la funcion del boton "Anterior"
    – JG_GJ
    Commented el 11 oct. 2018 a las 20:51
  • coloca <button type="button" a Anterior, ya que sino colocas nada es como decir que es <button type="submit">.
    – zerocool
    Commented el 11 oct. 2018 a las 20:55
  • Muchas gracias.
    – JG_GJ
    Commented el 11 oct. 2018 a las 20:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.