Validaciones con JQuery mediante JQuery Validate

¿Cansado de tener que preocuparse por cómo realizar las validaciones? O ¿Cansado de realizar validaciones en PHP? Hoy vamos a aprender a realizar validaciones mendiante un Script de jQuery. Vamos a dividirlo en pasos:
  1. Descargar el script, lo puedes descargar aquí. También vamos a necesitar el script de jQuery.
  2. Agregamos las referencias en nuestro proyecto: 
    <head>
  <script src="./JS/jquery-1.11.1.min.js"></script>
  <script src="./JS/jquery.validate.js"></script>
</head>
  3. Creamos nuestro formulario: 
    <form role="form" class="form-horizontal" id="formInsertPosition">
  <div class="form-group">
    <label class="control-label col-sm-2" for="namePosition">Nombre:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="namePosition"name="namePosition" placeholder="Ingrese el nombre del puesto" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Enviar</button>
    </div>
  </div>
</form>
  4. Creamos las validaciones JavaScript: 
    <script type="text/javascript">
  $(document).ready
  (
    function()
    {
      $("#formInsertPosition").validate
      (
        {
          event: "blur",
          rules:
          {
            namePosition:
            {
              required: true, 
              minlength: 3
            }
          },
          messages:
          {
            namePosition: 
            {
              required: "Ingrese el nombre del puesto",
              minlength: "La longitud mínima es de 3 carácteres"
            }
          },
          debug: true,
          errorElement: "label"
        }
      );
    }
  );
</script>

0 comentarios:

Publicar un comentario