1

Tengo mi siguiente vista con un formulario para el inicio de sesion:

<div class="navbar navbar-clear">
    <div class="navbar-inner">
        <div class="center sliding"></div>
    </div>
</div>
<div class="pages navbar-fixed toolbar-fixed">
    <div data-page="login" class="page">
        <div class="page-content">
            <div class="nice-header header-fix-top small">
                <div class="logo">
                    <h1>login</h1>
                    <h2>login</h2>
                </div>
                <svg class="anim-svg" viewBox="0 0 629 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                    <defs></defs>
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                        <g id="Splash" sketch:type="MSArtboardGroup" transform="translate(-60.000000, -749.000000)" fill="#FFFFFF">
                            <g id="flaga" sketch:type="MSLayerGroup">
                                <path d="M60.7617187,750.025391 L375.435547,811.568359 L688.558594,749.867188 L60.7617187,750.025391 Z" id="Path-30" sketch:type="MSShapeGroup"></path>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="login-view-box mt-50">
                <div class="list login-form-box">
                    <form name="formIniciar" action="#" method="POST" enctype="multipart/form-data" autocomplete="off" id="formIniciar" class="form nice-label">
                        <div class="form-row">
                            <label for="usuario"><span class="icon-man"></span></label>
                            <input type="text" id="usuario" name="usuario" placeholder="Usuario">
                        </div>
                        <label class="error" for="usuario"></label>
                        <div class="form-row">
                            <label for="password"><span class="icon-lock"></span></label>
                            <input type="password" id="password" name="password" placeholder="Contraseña">
                        </div>
                        <label class="error" for="password"></label>
                         <div class="form-row">
                            <div class="input-submit">
                                <a href="#" class="button button-secondary button-fill iniciar">Ingresar</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

tengo el problema que al usar jquery validate no ingresa a submitHandler, si realiza la validación ya que si no ingreso usuario o contraseña me sale el mensaje de validate.

$('form[name=formIniciar]').validate({
        rules: {
            usuario: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages:{
            usuario:{
                required: "Por favor ingrese usuario"
            },
            password:{
                required: "Por favor ingrese contraseña"
            }
        },
        submitHandler: function (form, e) {
            console.log("ENVIO DEL FORMULARIO") //ESTO NO LO MUESTRA EN CONSOLA.
            e.preventDefault();
        }
    });

$('form[name=formIniciar]').validate({
            rules: {
                usuario: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages:{
            	usuario:{
            		required: "Por favor ingrese usuario"
            	},
            	password:{
            		required: "Por favor ingrese contraseña"
            	}
            },
            submitHandler: function (form, e) {
            	console.log("ENVIO DEL FORMULARIO") //ESTO NO LO MUESTRA EN CONSOLA.
            	e.preventDefault();
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<div class="navbar navbar-clear">
        <div class="navbar-inner">
            <div class="center sliding"></div>
        </div>
    </div>
    <div class="pages navbar-fixed toolbar-fixed">
        <div data-page="login" class="page">
            <div class="page-content">
                <div class="nice-header header-fix-top small">
                    <div class="logo">
                        <h1>login</h1>
                        <h2>login</h2>
                    </div>
                    <svg class="anim-svg" viewBox="0 0 629 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                        <defs></defs>
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g id="Splash" sketch:type="MSArtboardGroup" transform="translate(-60.000000, -749.000000)" fill="#FFFFFF">
                                <g id="flaga" sketch:type="MSLayerGroup">
                                    <path d="M60.7617187,750.025391 L375.435547,811.568359 L688.558594,749.867188 L60.7617187,750.025391 Z" id="Path-30" sketch:type="MSShapeGroup"></path>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
                <div class="login-view-box mt-50">
                    <div class="list login-form-box">
                        <form name="formIniciar" action="#" method="POST" enctype="multipart/form-data" autocomplete="off" id="formIniciar" class="form nice-label">
                            <div class="form-row">
                                <label for="usuario"><span class="icon-man"></span></label>
                                <input type="text" id="usuario" name="usuario" placeholder="Usuario">
                            </div>
                            <label class="error" for="usuario"></label>
                            <div class="form-row">
                                <label for="password"><span class="icon-lock"></span></label>
                                <input type="password" id="password" name="password" placeholder="Contraseña">
                            </div>
                            <label class="error" for="password"></label>
                             <div class="form-row">
                                <div class="input-submit">
                                    <a href="#" class="button button-secondary button-fill iniciar">Ingresar</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Lo raro es que tengo otras vistas con jquery validate y ahí si me funciona sin ningun problema.

Tengo una carpeta www que contiene 2 archivos index.html y login.html y tengo otra vista en la ruta vistas/consultas/consultas.html //la ruta vistas se encuentra dentro de la carpeta www en este archivo consultas.html si me trabaja normal el jquery validate.

de antemano muchas gracias.

1 respuesta 1

1

Hola he estado mirando tu código y he podido llegar a la siguiente conclusión.

  1. La etiqueta de ingreso(href) no tiene ningún evento asociado o al menos en el fragmento que has puesto

Si quieres que el formulario se envié, puedes añadir un botón de tipo "submit" o hacerlo por medio de javascript.

Si quieres hacerlo mediante Javascript simplemente tienes que asignar un evento a tu href(ingresar).

Ejemplo:

<a href="#" onclick="enviarForm();">Ingresar</a>

Entonces cuando se haga click en ingresar llamas a la funcion enviarForm() para enviar el formulario.

No me enrollo más y te dejo el código, que funciona perfectamente con un par de cambios.

$('form[name="formIniciar"]').validate({
        rules: {
            usuario: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages:{
            usuario:{
                required: "Por favor ingrese usuario"
            },
            password:{
                required: "Por favor ingrese contraseña"
            }
        },
        submitHandler: function (form, e) {
            console.log("ENVIO DEL FORMULARIO")
            /**
            
            Aqui puedes hacer un fecth() hacia tu api.
            fetch(urlApi)
            no olvides el e.preventDefault()
             */
            
            /*
              Por ahora lo enviamos tal cual como esta
              definido en el html.
            */
            form.submit()
        }
    });
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<div class="navbar navbar-clear">

  <div class="navbar-inner">
        <div class="center sliding"></div>
    </div>
</div>
<div class="pages navbar-fixed toolbar-fixed">
    <div data-page="login" class="page">
        <div class="page-content">
            <div class="nice-header header-fix-top small">
                <div class="logo">
                    <h1>login</h1>
                    <h2>login</h2>
                </div>
                <svg class="anim-svg" viewBox="0 0 629 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                    <defs></defs>
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                        <g id="Splash" sketch:type="MSArtboardGroup" transform="translate(-60.000000, -749.000000)" fill="#FFFFFF">
                            <g id="flaga" sketch:type="MSLayerGroup">
                                <path d="M60.7617187,750.025391 L375.435547,811.568359 L688.558594,749.867188 L60.7617187,750.025391 Z" id="Path-30" sketch:type="MSShapeGroup"></path>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="login-view-box mt-50">
                <div class="list login-form-box">
                    <form name="formIniciar" action="#" method="POST" enctype="multipart/form-data" autocomplete="off" id="formIniciar" class="form nice-label">
                        <div class="form-row">
                            <label for="usuario"><span class="icon-man"></span></label>
                            <input type="text" id="usuario" name="usuario" placeholder="Usuario">
                        </div>
                        <label class="error" for="usuario"></label>
                        <div class="form-row">
                            <label for="password"><span class="icon-lock"></span></label>
                            <input type="password" id="password" name="password" placeholder="Contraseña">
                        </div>
                        <label class="error" for="password"></label>
                         <div class="form-row">
                            <div class="input-submit">
                               <!--El input type submit o mediante js-->
                              <button type="submit">Ingresar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Espero haberte ayudado y un saludo!!!

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.