» ¿Pero jQuery no facilita la escritura de su propio complemento de validación?»
Claro,pero todavía hay muchas sutilezas que cuidar: Necesita una biblioteca estándar de métodos de validación (como correos electrónicos, URL, números de tarjetas de crédito). Debe colocar mensajes de error en el DOM y mostrarlos y ocultarlos cuando sea apropiado. Quieres reaccionar a algo más que un simple evento de envío, como keyup y blur.Es posible que necesite diferentes formas de especificar reglas de validación de acuerdo con el entorno del lado del servidor que está utilizando en diferentes proyectos. Y después de todo, no quieres reinventar la rueda, ¿verdad?

«¿Pero no hay ya un montón de complementos de validación por ahí?»Bien, hay muchas soluciones que no están basadas en jQuery (que evitarías desde que encontraste jQuery) y algunas soluciones basadas en jQuery. Este es uno de los plugins jQuery más antiguos (iniciado en julio de 2006) y ha demostrado su eficacia en proyectos de todo el mundo. También hay un artículo que discute cómo este complemento se ajusta a la factura de la solución de validación debería ser.

¿No estás convencido? Echa un vistazo a este ejemplo:

<form class="cmxform" method="get" action="">
 <fieldset>
 <legend>Please provide your name, email address (won't be published) and a comment</legend>
 <p>
 <label for="cname">Name (required, at least 2 characters)</label>
 <input name="name" minlength="2" type="text" required>
 </p>
 <p>
 <label for="cemail">E-Mail (required)</label>
 <input type="email" name="email" required>
 </p>
 <p>
 <label for="curl">URL (optional)</label>
 <input type="url" name="url">
 </p>
 <p>
 <label for="ccomment">Your comment (required)</label>
 <textarea name="comment" required></textarea>
 </p>
 <p>
 <input class="submit" type="submit" value="Submit">
 </p>
 </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

enlace no es agradable y fácil?

Una sola línea de jQuery para seleccionar el formulario y aplicar el complemento de validación, además de algunas anotaciones en cada elemento para especificar las reglas de validación.

Por supuesto, esa no es la única forma de especificar reglas. Tampoco tiene que depender de esos mensajes predeterminados, pero son útiles al comenzar a configurar la validación de un formulario.

enlazar Algunas cosas a tener en cuenta al jugar con la demo

• Después de intentar enviar un formulario no válido, el primer elemento no válido se enfoca, lo que permite al usuario corregir el campo. Si otro campo no válido, que no era el primero, se enfocó antes de enviar, ese campo se enfocará en su lugar, lo que permite al usuario comenzar por la parte inferior si lo prefiere.
• Antes de que un campo está marcado como inválido, la validación es perezoso: Antes de enviar el formulario por primera vez, el usuario puede desplazarse por los campos sin llegar mensajes molestos – a no ser intervenidas antes de tener la oportunidad de entrar en un valor correcto
• una Vez que un campo está marcado inválido, es validado con impaciencia: Tan pronto como el usuario ha ingresado el valor necesario, el mensaje de error se elimina
• Si el usuario ingresa algo en un campo no marcado, y las pestañas/clics se alejan de él (desenfoque del campo), se valida-obviamente, el usuario tenía la intención de ingresar algo, pero no pudo ingresar el valor correcto

Ese comportamiento puede ser irritante al hacer clic en las demostraciones del complemento de validación – está diseñado para una experiencia de usuario discreta, molestando al usuario lo menos posible con mensajes de error innecesarios. Así que cuando pruebes otras demos, intenta reaccionar como lo haría uno de tus usuarios y mira si el comportamiento es mejor. Si no, por favor, hágamelo saber acerca de cualquier idea que pueda tener para mejoras!

Documentación de la API de enlace

Probablemente esté buscando opciones de enlace

para el método validate ()

Si no, siga leyendo.

A lo largo de la documentación, se usan muy a menudo dos términos, por lo que es importante que conozca su significado en el contexto del complemento de validación:

• método: Un método de validación implementa la lógica para validar un elemento, como un método de correo electrónico que comprueba el formato correcto del valor de una entrada de texto. Un conjunto de métodos estándar está disponible, y es fácil escribir el suyo propio.regla
• : Una regla de validación asocia un elemento con un método de validación, como «validar entrada con nombre» correo primario «con los métodos «obligatorio»y» correo electrónico».

métodos de complemento de enlace

Esta biblioteca agrega tres métodos de complemento jQuery, el punto de entrada principal es el método validate :

• validate() – Valida el formulario seleccionado.
• valid() Comprueba si el formulario seleccionado o los elementos seleccionados son válidos.
• rules() – Leer, agregar y eliminar reglas para un elemento.

selectores personalizados de enlace

Esta biblioteca también amplía jQuery con tres selectores personalizados:

• :blank – Selecciona todos los elementos con un valor en blanco.
• :filled – Selecciona todos los elementos con un valor rellenado.
• :unchecked Selecciona todos los elementos que están desactivadas.

validador de enlaces

El método validate devuelve un objeto Validador que tiene algunos métodos públicos que puede usar para activar la validación mediante programación o cambiar el contenido del formulario. El objeto validador tiene más métodos, pero solo los documentados aquí están destinados al uso.

• Validator.form() – Valida el formulario.
• Validator.element() Valida un solo elemento.
• Validator.resetForm() div – – Restablece el formulario controlado.
• Validator.showErrors() – Muestra los mensajes especificados.
• Validator.numberOfInvalids() Devuelve el número de campos no válidos.
• Validator.destroy() – Destruye esta instancia del validador.

Hay algunos métodos estáticos en el objeto validador:

• jQuery.validator.addMethod() – Añadir un método de validación personalizado.
• jQuery.validator.format() Reemplaza {n} marcadores de posición con argumentos.
• jQuery.validator.setDefaults() Modificar la configuración predeterminada para la validación.
• jQuery.validator.addClassRules() – Añadir un método de clase compuesto.

lista de enlaces de métodos de validación incorporados

Se proporciona un conjunto de métodos de validación estándar:

• required – Hace que el elemento sea necesario.
• remote div – – Solicita un recurso para comprobar la validez del elemento.
• minlength – Hace que el elemento requiera una longitud mínima dada.
• maxlength – Hace que el elemento requiera una longitud máxima dada.
• rangelength – Hace que el elemento requiera un rango de valores dado.
• min – el elemento requieren un mínimo.
• max – el elemento requieren un máximo dado.
• range – Hace que el elemento requiera un rango de valores dado.
• step – el elemento requieren un paso dado.
• email – el elemento requieren un correo electrónico válido
• url – el elemento requieren de una dirección url válida
• date – el elemento requieren de una fecha.
• dateISO – Hace que el elemento requiera una fecha ISO.
• number – Hace que el elemento requiera un número decimal.
• digits – el elemento requieren sólo dígitos.
• equalTo div – – Requiere que el elemento sea el mismo que otro

Algunos métodos más se proporcionan como complementos, y actualmente se incluyen en métodos adicionales.js en el paquete de descarga. No todos están documentados aquí:

• accept – Hace que la carga de un archivo acepte solo tipos mime especificados.
• creditcard – el elemento requiere un número de tarjeta de crédito.
• extension – Hace que el elemento requiera una extensión de archivo determinada.
• phoneUS div – – Validar para un número de teléfono válido de EE.
• require_from_group: Garantiza que un número determinado de campos de un grupo estén completos.

Puede encontrar el código fuente de todos los métodos adicionales en el repositorio de GitHub.

Es posible redefinir la implementación de las reglas integradas utilizando el$.validator.methods propiedad

enlace Pautas generales

La sección de Pautas Generales proporciona una discusión detallada del diseño y las ideas detrás del complemento, explicando por qué ciertas cosas son como son. Cubre las características con más detalle que la documentación de la API, que solo explica brevemente los diversos métodos y opciones disponibles.

Si ha decidido utilizar el complemento de validación en su aplicación y desea conocerlo mejor, se recomienda que lea las directrices.

enlaza campos con nombres complejos (corchetes, puntos)

Cuando tengas un atributo de nombre como user, asegúrate de poner el nombre entre comillas. Más detalles en las Pautas Generales.

enlace Demasiado recursividad

Otro problema común ocurre con este código:

 $("#myform").validate({
 submitHandler: function(form) {
 // some other code
 // maybe disabling submit button
 // then:
 $(form).submit();
 }
 });

Esto se traduce en una excesiva recursividad de error: $(form).submit() activa otra ronda de validación, lo que resulta en otra llamada a submitHandler, y listo, la recursividad. Reemplázalo con un formulario.submit (), que activa el evento de envío nativo en su lugar y no la validación.

de Modo que el código correcto se ve ligeramente diferente:

 $("#myform").validate({
 submitHandler: function(form) {
 form.submit();
 }
 });

enlace de La Marketo formulario de inscripción

enlace de La Marketo formulario de inscripción, el paso 2

Basado en una versión antigua de la marketo.com formulario de inscripción. La validación personalizada fue reemplazada una vez con este complemento. ¡Gracias a Glen Lipka por contribuir!

características Notables de la demo:

• Pantalla de mensajes personalizada: No se muestran mensajes para el método requerido, solo para errores de escritura( como un formato de correo electrónico incorrecto); Se muestra un resumen en la parte superior («Te has perdido 12 campos. Se destacan a continuación.»)
• Validación remota del campo de correo electrónico. Trate de entrar, por ejemplo.
• Integración con el complemento de entrada enmascarada, consulte los campos Zip y de teléfono y el Número de tarjeta de crédito en el paso 2
• Un método personalizado para hacer que la dirección de facturación en el paso 2 sea opcional cuando se marca» Igual que la dirección de la empresa »
• Un método personalizado para verificar la contraseña: Comprueba que la contraseña contenga al menos un número y un carácter y que tenga al menos 6 caracteres de longitud. Si el usuario difumina el campo con un valor no válido, la entrada se vacía y se vuelve a enfocar.

enlazar El formulario de registro de Recordar la leche

El formulario de registro de rememberthemilk.com (basado en una versión anterior). La validación personalizada se reemplazó con este complemento. Gracias a RTM por contribuir!

características Notables de la demo:

• Visualización de mensajes personalizados, basada en el diseño de la tabla original, utilizando la opción de éxito para mostrar una marca de verificación para campos válidos
• Validación remota del nombre de usuario, para verificar si ya está tomado (pruebe «Peter», «asdf» o «George»)

enlace un formulario de varias partes «comprar&vender una casa»

Contribuido por Michael Evangelista, mostrando un formulario de varias partes para comprar y vender casas.

características Notables de la demo:

• Multiparte, implementado con el acordeón de interfaz de usuario de jQuery y un método personalizado para verificar si un elemento está en la página actual cuando se valida Integración
• con complemento de entrada enmascarada, consulte campos de teléfono y Zip

enlace mediante validación remota para ayudar con s

Funciones validación remota para ayudar al usuario a completar s.

Características notables de la demostración:

• Validación remota para comprobar si el usuario ingresó el correcto , sin obligarlo a enviar el formulario primero