Parsley.js proporciona validación de formularios en el cliente con excelente UX y sin código repetitivo.
Inicialización
// Inicialización recomendada con JavaScript
$('#myForm').parsley({
errorClass: 'is-invalid',
successClass: 'is-valid'
});
Restricciones estándar de validación HTML
<!-- Campo obligatorio -->
<input required />
<!-- Tipos email y url -->
<input type="email" />
<input type="url" />
<!-- Límites de longitud -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />
<!-- Patrones numéricos y expresiones regulares -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />
<!-- Rango numérico -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />
<!-- Límites de selección en casillas de verificación -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />
<!-- Coincidencia para confirmación de contraseña -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />
API de JavaScript para formularios y campos
Métodos de formulario
const form = $('#myForm').parsley();
form.isValid(); // Devuelve true si es válido, false si es inválido
form.validate(); // Ejecuta la validación y muestra mensajes de error
form.reset(); // Restablece el estado de validación y limpia errores
form.destroy(); // Desvincula los manejadores de Parsley del formulario
Métodos de campo
const field = $('#username').parsley();
field.isValid();
field.validate(); // Devuelve array de restricciones fallidas
Validadores personalizados
Registrar validadores personalizados de forma global:
window.Parsley.addValidator('multipleOf', {
requirementType: 'integer',
validateNumber(value, requirement) {
return value % requirement === 0;
},
messages: {
es: 'Este valor debe ser un múltiplo de %s.',
en: 'This value must be a multiple of %s.'
}
});
Uso en el marcado HTML:
<input type="number" data-parsley-multiple-of="5" />