0

Hola un cordial saludo a la comunidad, el dia de hoy les traigo un problema nuevo el cual trata de una validación simple con plugin de jquery.validate, el asunto es el siguiente tengo mi formulario en html :

<div class="container" align="center"><br>
  <fieldset><br>
    <legend>Busqueda Participantes</legend>
    <form class="form-inline" method="post" id="participantes" name="participantes">
      <div>

          <input type="text" class="form-control" placeholder="Cedula" name="cedula" id="cedula">         
          <input type="hidden" name="buscar" id="buscar">
      </div>
      <div class="form-group">
          <input type="submit" value="Buscar" class="btn btn-primary" name="buscar" id="buscar">      
      </div>    
    </form><br>
  </fieldset><br>
</div>

y en otro lado mi script con el codigo de jquery validate para validar el campo cedula

$(function(){
    //$(document).ready(function(){
    //$(document).on("ready",function(){
    $("#participantes").on("click",function(){
        $("#buscar").validate
        //errorClass: "error",
        alert("LLega hasta aqui");
        ({
            rules:
            {
                cedula:{required:true,number:true,min:100000,max:99999999}
            },
            messages:
            {
                cedula:{required:'Campo Requerido',min:'Minimo 6 numeros',max:'Maximo 8 Numeros',number:'Solo Numeros'}
            }
        });
    });
});

el asunto es que el llega hasta el alert("LLega hasta aqui"); pero no se porque razon no me ejecuta los mensajes de validacion que deberia mostar ya he intentado de todo y no se que hacer, por favor si alguien sabe la respuesta a esta pregunta ele estare muy agradecido.

2
  • En la consola del navegador no muestra ningun error?
    – Alvarez
    Commented el 28 mar. 2018 a las 17:27
  • no muestra nada Commented el 28 mar. 2018 a las 19:49

2 respuestas 2

0

Debes agregarle submitHandler para ejecutar el llamado ( asi me funciono a mi )

$("#participantes").on("click",function(){
  $("#buscar").validate({
    rules:{
     cedula:{required:true,number:true,min:100000,max:99999999}
    },
   messages:{
     cedula:{required:'Campo Requerido',min:'Minimo 6 numeros',max:'Maximo 8 Numeros',number:'Solo Numeros'}
   },
   submitHandler: function(form) {
      form.submit();
    }
  });
});
2
  • he checho otros formularios con esta estructura y me funciona, pero voy a probar con submitHandler ya que no he probado con eso a ver como me va Commented el 28 mar. 2018 a las 17:07
  • nada aun persiste la problematica no emite mensajes ..... Commented el 28 mar. 2018 a las 18:41
0

Tienes dos errores. Uno de concepto y otro de código:

  • Concepto: El método validate no tiene que ser invocado en el evento click sino en el load. Digamos que de esa forma estás asignado las reglas de validación a tu formulario al cargar el DOM.

  • Código: Por otro lado, tu form es participantes y tu botón buscar y los estás llamando al revés.

Te dejo una demo funcionando. Como ves elimino el click ya que no es necesario:

$(function(){
    //$(document).ready(function(){
    //$(document).on("ready",function(){
    $("#participantes").validate({
            rules:
            {
                cedula:{required:true,number:true,min:100000,max:99999999}
            },
            messages:
            {
                cedula:{required:'Campo Requerido',min:'Minimo 6 numeros',max:'Maximo 8 Numeros',number:'Solo Numeros'}
            }
        });   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<div class="container" align="center"><br>
  <fieldset><br>
    <legend>Busqueda Participantes</legend>
    <form class="form-inline" method="post" id="participantes" name="participantes">
      <div>

          <input type="text" class="form-control" placeholder="Cedula" name="cedula" id="cedula">         
          <input type="hidden" name="buscar" id="buscar">
      </div>
      <div class="form-group">
          <input type="submit" value="Buscar" class="btn btn-primary" name="buscar" id="buscar">      
      </div>    
    </form><br>
  </fieldset><br>
</div>

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.