Cómo filtrar la validación de formularios web

Después de que haya marcado sus campos requeridos y ha proporcionado información al usuario, es necesario afinar la validación de su formulario web. Antes de hacerlo, debe hacer una pausa y mirar el código que ha añadido para su validación.

los enviar controlador de eventos se configura a través de jQuery enviar() función:

$ ("# formUsuario") presente (function (e) {removeFeedback () -. errores var = validateForm () - if (errores == "") {return cierto-} else {provideFeedback (errores) -e.preventDefault ( ) -Retorno falsa -}}) -

Dentro de enviar() función, se se elimina cualquier comentario lo primero que pasa. A continuación, el validateForm () función se llama y todo lo que viene de vuelta de esa función se fija en los errores variables.

Si la variable de errores está vacía, entonces el enviar() función devuelve Boolean cierto, que esencialmente le dice al navegador, "Todo está bien- seguir adelante y presentar el formulario." Sin embargo, si se encuentran errores, el suministre realimentación() función se llama y las acciones por defecto (para enviar el formulario) se detuvo, gracias a la preventDefault y la de regreso falso declaraciones.

los validateForm () función es el corazón de la lógica de validación para el formulario.

validateForm function () {var errorFields = new Array () - // Comprobar campos obligatorios tienen algo en themif {errorFields.push ('nombre') ($ ('# nombre') val () == ""). -} si (. $ ('# email') val () == "") {errorFields.push ('email') -} if (. $ ('# contraseña1') val () == "") {errorFields. push ('contraseña1') -} volver errorFields-} // fin función validateForm

En esta función, una matriz se crea una instancia para mantener los campos de error. Esto le permite almacenar más de un error en lugar de un solo error en un momento (que sería frustrante para el usuario).

Cada campo requerido se recupera utilizando su ID. Si el valor de ese campo es "", entonces el ID del campo con el error se empuja sobre el errorFields array. Por último, la errorFields array se devuelve y se convierte en la matriz de error que se ve en la enviar() manejador.

Otra forma de realizar esta tarea sería añadir una clase para cada elemento que se requiere y luego recorrer cada una de las clases requeridas con jQuery, como $ ('. required'). each (.

Con esa validación, usted puede mirar en el suministre realimentación() función:

función provideFeedback (incomingErrors) {for (var i = 0- i lt; incomingErrors.length- i ++) {$ ("#" + incomingErrors [i]) addClass ("errorClass") -. $ ("#" + incomingErrors [i] "Error") removeClass ("errorFeedback") -.} $ ("#errorDiv") html ("Los errores encontrados") -.}

los suministre realimentación() función de bucles a través de los errores entrantes y añade el errorClass clase a los campos. Recordemos de la CSS que esta clase simplemente establece el color de fondo a un tono de rojo. A continuación, el errorFeedback se retira clase. Esta clase oculta la realimentación textual, por lo que mediante la eliminación de la clase, la retroalimentación se hace visible para el usuario. Por último, fuera del bucle, la errorDiv's HTML se establece en la frase "Los errores encontrados".

La pieza final del form.js archivo es el removeFeedback () función:

función removeFeedback () {$ ("# errorDiv") html ("") -. $ ('input') cada uno (function () {$ (this) .removeClass (. "errorClass") -}) - $ (' .errorSpan ') cada uno (function () {$ (this) .addClass ("errorFeedback") -}.) -}

Esta función establece primero la errorDiv's HTML en blanco. A continuación, cada entrada tiene su errorClass eliminado y cada errorSpan en la página tiene su errorFeedback clase añadió, que en esencia los oculta de la visibilidad. Todo esto se hace con la ayuda de selectores y funciones de jQuery.