Ir al contenido principal

jQuery Validation de Formularios

jQuery Validation

jQuery plugin: Validation es un plugin que facilita la validación de formularios.
Una vez instalado, .validate(options) permite indicar en options un conjunto de reglas y mensajes que se usarán para la validación.

/**
* Return true if the field value matches the given format RegExp
*
* @example jQuery.validator.methods.pattern("AR1004",element,/^AR\d{4}$/)
* @result true
*
* @example jQuery.validator.methods.pattern("BR1004",element,/^AR\d{4}$/)
* @result false
*
* @name jQuery.validator.methods.pattern
* @type Boolean
* @cat Plugins/Validate/Methods
*/
jQuery.validator.addMethod("pattern", function(value, element, param) {
  if (this.optional(element)) {
    return true;
  }
  if (typeof param === 'string') {
    param = new RegExp('^(?:' + param + ')$');
  }
  return param.test(value);
}, "Invalid format.");

$(document).ready(function() {
  $('form#contactanos').validate({
    rules: {
      nombres: {
        required: true,
        pattern: /^[a-zA-ZáéíïóúüÁÉÍÏÓÚÜñÑ\'\"\s]+$/,
        maxlength: 100
      },
      edad: {
        required: true,
        digits: true
      },
      birthday: {
        required: function() {
            return $('[name="edad"]').val() == '';
        }
      }
    },
    messages: {
      nombres: {
        required: 'No puede estar vacío',
        pattern: 'No es válido',
        maxlength: 'No puede exceder los 100 caracteres'
      },
      edad: {
        required: 'No puede estar vacío',
        digits: 'Debe ser un número'
      },
      birthday: {
        required: 'Debe indicar su edad'
      }
    }
  });
});

jQuery.validator.addMethod() permite agregar más opciones de validación, en este caso patrones de expresiones regulares. Más patrones se pueden hallar en el archivo additional-methods.js que acompaña al plugin.

required puede ser el resultado de un callback. En este caso, es una función que verifica si cierto campo ha sido llenado.

Cuando un error ocurre, por default al campo en cuestión se le agrega la clase 'error' y se le precede un label.error también, con el mensaje que se especificó.
<form>
  <label for="nombres">Nombres</label>
  <input type="text" name="nombres" class="error">
  <label for="nombres" generated="true" class="error" style="">No puede estar vacío</label>

  <label for="edad">Edad</label>
  <input type="text" name="edad">

  <label for="birthday">Fecha de Nacimiento</label>
  <input type="text" name="birthday">
</form>

Entradas populares de este blog

Cómo abrir un balde de pintura

Cómo abrir un balde de pintura Estuve como media hora intentando palanquear con un desarmador y hasta de cortar parte de la tapa con una cuchilla. Entonces tome un pequeño alicate y jalé uno de los extremos donde había cortado. Me dí cuenta que la parte inferior del borde de la tapa era un sello de seguridad que puede ser jalado. Lo jalé con el alicate alrededor del borde. Quitado el sello, fue relativamente fácil usar las manos para abrir la tapa.

Pizarra acrílica casera y portátil

Pizarra acrílica casera y portátil El papel contact es auto adhesivo y tiene múltiples usos en arte, decoración, etc.
Busqué papel contact transparente porque quiero hacer el enmicado casero de unas tarjetas de juego, sobre las que hay que hacer anotaciones que se puedan borrar fácilmente.
Se me ocurrió que podrían funcionar bien unos marcadores para pizarra.
Descubrí que con marcadores de pizarra se puede escribir muy bien sobre el papel contact. Lo escrito permanece y se borra con la misma facilidad que en una pizarra acrílica. Eureka :-D
Se puede pegar el papel contact en una superficie plana, como una pared, el lado de la refrigeradora, en un biombo, etc, etc y tener fácilmente el equivalente a una pizarra acrílica, por un costo mucho, mucho menor.


Además, por ser transparente, se puede colocar debajo papel de colores, cuadriculado, o con otro diseño que te resulte útil.
Podrías llevarte el papel y tener así una pizarra portátil.
Si tuvieras una pizarra antigua, de las que usan t…

Root y Link2SD para Galaxy S3 Mini (GT-I8190L)

Root y Link2SD para Galaxy S3 Mini (GT-I8190L)Consideraciones previas:El proceso de rooteo aquí descrito se supone que no es destructivo, pero siempre es recomendable hacer un backup, principalmente de la información más importante.El proceso puede tardar como 10 minutos. Asegurarse que la batería del celular tenga una buena cantidad de carga (yo lo hice con 20% aunque se recomienda 80%).Tener a mano el cable de conexión USB para conectar el celular a la PC (pero no conectarlo hasta que la guía lo indique).Que en el celular esté activado el modo de depuración.Tener activa la conexión a Internet en la PC.Puede ser que si está instalado una versión antigua de Kies, Odin no reconozca al dispositivo. (A mi me pasó, pero el inconveniente es salvable. Desinstalé Kies y los drivers asociados y más bien instalé los drivers usando el mini toolkit.)Ver las guias completas antes de realizar los pasos.Este post es sólo con fines educativos. La responsabilidad de la ejecución es tuya.Ejecutar Sam…