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.