validacion - validar formulario javascript html5

¿La mejor solución de JavaScript para la validación e interacción del formulario del lado del cliente?

Question

Nuestros formularios web son realmente complejos. ¿Cuál es una gran solución para la validación de formularios extensibles, preferiblemente uno que funcione con jQuery?

Fondo:

Nuestro sitio tiene un poco de Ajax, pero el enfoque real está en la experiencia del usuario a través de aproximadamente 20 formularios de varias páginas o "asistentes". Estas formas son complicadas.

• Presentación: algunos campos son flotantes o ints. Validación significa eliminar caracteres no decimales, pero también queremos asegurarnos de que, si un usuario ingresa 5 en un campo de precio, el campo se actualiza a 5.00 .
• Efectos secundarios: algunos campos tienen efectos secundarios cuando se actualizan. Por ejemplo, actualizar el precio o la cantidad de un artículo necesita actualizar un campo de subtotal.
• Elementos movidos por widgets : algunos campos están ocultos y tienen valores poblados por widgets. Por ejemplo, un widget de mapa le permite señalar una ubicación y un campo oculto se actualiza con coordenadas de latitud y longitud, pero la ubicación debe estar dentro de una región determinada.
• Grupos: algunos campos son grupos, como dirección / ciudad / estado / postal, y solo se deben validar cuando se hayan completado todos los campos.
• Validación del lado del servidor: la validación de algunos campos requiere la verificación del back-end a través de solicitudes Ajax
• Múltiples formularios por página: en ocasiones, un usuario debe completar un formulario antes de que se abra un cuadro de diálogo con otro formulario. Un framework tiene que ser más versátil que vinculante a onSubmit : a veces onSubmit varios formularios en orden desde la misma página usando Ajax. (Por ejemplo, permitimos que los usuarios se registren y creen un widget de una sola vez pero, debido a los sistemas heredados, ese flujo requiere dos solicitudes POST).
• Visualización de errores personalizables: a veces los errores aparecen sobre los campos, a veces el estilo del campo cambia, y nuestros nuevos diseños requieren ventanas emergentes tipo tooltip (ala qTip ) para algunos errores.
• Snappiness: la experiencia del usuario es clave y la retroalimentación táctil es importante. Alguna solución
• Botones para enviar: al hacer clic en el botón Enviar, se debe validar todo y luego mostrar una respuesta, pero dado que parte de la validación se realiza de forma asincrónica.

Actualmente estamos usando la biblioteca jQuery Validation pero nuestros formularios parecen estar superando su capacidad. He estado viendo cosas como <angular/> , Knockout y Backbone.js , pero me preocupa que sean demasiado pesados ​​o que requieran que reescribamos nuestra interfaz.

(Esto debería ser una wiki de la comunidad).

Answer 1

¡Respondiendo esto yo mismo desde que alguien en nuestro equipo notó Validator de jQuery Tools !

• Presentación : admite campos de entrada HTML5. pattern campos de pattern aseguran de que el usuario solo pueda ingresar la prueba en un patrón determinado.
• Efectos secundarios : desencadena eventos en el formulario y en campos individuales: onFail y onSuccess
• Elementos movidos por widgets: se recomiendan "tipos de entrada personalizados". La demostración básica incluso incluye un campo de "edad" de números naturales antiguos.
• Grupos : escriba una "función de coincidencia" cuyo único propósito es filtrar qué campos se van a validar.
• Validación del lado del servidor : lo hace y lo hace de manera inteligente, depende de que su validador llame a una devolución de llamada (para que sea amigable con la asincronización) en lugar de un valor de retorno.
• Múltiples formularios por página : jQuery Tools parece estar muy bien construido y esto no debería ser un problema.
• Visualización de error personalizable - ¿Errores al lado de los campos? ¿Todo en un lugar? No hay problema. Todavía no es lo suficientemente bueno? Enlazar eventos en caso de falla. Incluso usa información sobre herramientas por defecto.
• Snappiness - Demos son muy ágiles
• Enviar botones : no hay problema.

Actualización: Sí, acaba de volver a implementar una parte de nuestro sitio con la información sobre herramientas del validador de jQuery Tools. ¡Fantástico!

Answer 2

Este es un enchufe desvergonzado, pero ¿podría ofrecerme un framework voluntario que diseñé? Lo he construido sobre la base de anotaciones (a la Hibernate Validator). Tiene soporte para restricciones personalizadas y creo que es bastante poderoso. Here también hay una pregunta de donde pedí una revisión del marco.

• Presentación : con restricciones de validación personalizadas, puede vincular la validación al elemento onChange. Además, como Regula admite validadores personalizados, puede hacer que su validador personalizado actualice el valor de un campo (por lo tanto, cambie de 5 a 5.00 ).
• Efectos secundarios : Regula admite efectos secundarios a través de validadores de restricciones personalizadas.
• Grupos : Regula admite grupos de validación. Puede dirigirse a grupos específicos para la validación. Al combinar un validador y un grupo personalizados, puede controlar el comportamiento del validador para que se valide solo cuando se llenan todos los elementos de ese grupo (sin embargo, debería realizar esta comprobación a través del Javascript normal).
• Validación del lado del servidor : con restricciones personalizadas, puede hacer una llamada AJAX para realizar la validación del lado del servidor. Con la forma en que el marco está estructurado actualmente, esto necesariamente tiene que ser un bloqueo de ajax-call. Planeo agregar una función asíncrona en el futuro.
• Formas multipropósito por página : Regula no se limita a validar un formulario por página. Puede manejar formularios múltiples (no estoy seguro si entendí su requisito correctamente, por lo tanto, podría no haber respondido esta parte correctamente).
• Visualización de errores personalizables: Regula no hace nada con la interfaz de usuario de la página en lo que respecta a la validación. Cuando valida, obtiene un conjunto de violaciones de restricciones que contienen mensajes de error y cosas por el estilo. Depende de usted, cómo mostrarlos.
• Snappiness: no realicé ningún punto de referencia, por lo que no puedo comentar sobre el rendimiento de mi marco en este sentido.
• Botones para enviar: Esto es algo que aún tengo que resolver (asincrónico vs. sincrónico).

Aquí están algunos ejemplos:

A continuación, se muestra la validación estándar, con restricciones incorporadas:

<input id = "myInput"
       name = "myInput"
       type = "text"
       class = "regula-validation"
       data-constraints = ''@NotEmpty @IsNumeric @Between(min=1, max=5)'' />

jQuery(document).ready(function() {
    // must call regula.binnd() first. The best place would be in an
    // onload handler. This function looks for elements with
    // a class name of "regula-validation" and binds the
    // appropriate constraints to the elements

    regula.bind(); 

    jQuery("#myForm").submit(function() {
        // this function performs the actual validation
        var validationResults = regula.validate();

        for(var index in validationResults) {
             var validationResult = validationResults[index];
             alert(validationResult.message);
        }
    });
});

Como puede ver, solo está trabajando con infracciones de restricciones, por lo que la forma en que muestra el mensaje de error depende exclusivamente de usted.

Aquí hay un ejemplo de una restricción personalizada:

regula.custom({
   name: "MustBe42",
   defaultMessage: "The answer must be equal to 42",
   validator: function() {
      return this.value == 42;
   }
});

Y su uso:

<input id = "theAnswerToLifeTheUniverseAndEverything" 
       name = "theAnswerToLifeTheUniverseAndEverything" 
       value = ""
       class = "regula-validation"
       data-constraints = "@MustBe42" />

Como el validador es una función de Javascript, puede hacer que haga cualquier cosa (por lo tanto, esto responde a su pregunta sobre los efectos secundarios).

Aquí hay un ejemplo de otra restricción que acepta parámetros:

regula.custom({
   name: "DivisibleBy",
   defaultMessage: "{label} must be divisible by {divisor}",
   params: ["divisor"],
   validator: function(params) {
      var divisor = params["divisor"];
      return (this.value % divisor) == 0;
   }
});

Y el uso:

<input id = "number" 
       name = "number" 
       value = ""
       class = "regula-validation"
       data-constraints = "@DivisibleBy(divisor=3, label=''The Number'')" />

Aquí hay un ejemplo del uso de grupos de validación:

<input id = "score"
       name = "score"
       type = "text"
       class = "regula-validation"
       data-constraints = ''@IsNumeric(label="Score", 
                                      message="{label} needs to be a number!"
                                      groups=[FirstGroup, SecondGroup, ThirdGroup]'' />

<input id = "age"
       name = "age"
       type = "text"
       class = "regula-validation"
       data-constraints = ''@IsNumeric(label="Age", 
                                      message="{label} needs to be a number!"
                                      groups=[SecondGroup]'' />

<input id = "name"
       name = "name"
       type = "text"
       class = "regula-validation"
       data-constraints = ''@NotEmpty(label="Name", 
                                     message="{label} cannot be empty!"
                                     groups=[FirstGroup]'' />

Y un fragmento que solo valida FirstGroup (por lo que solo se validan el score y el name ):

var constraintViolations = regula.validate({groups: [regula.Group.FirstGroup]});
var messages = "";

for(var index in constraintViolations) {
      var constraintViolation = constraintViolations[index];
      messages += constraintViolation.message + "/n";
}

if(messages != "") {
   alert(messages);
}

Si planeas probarlo, te recomiendo descargar la versión 1.1.1 . La documentación actual coincide específicamente con esa versión. En 1.2.1 agregué soporte para restricciones compuestas, pero no actualicé mi documentación para reflejar eso.

Entiendo si esto no aborda todas sus inquietudes o si esto no es lo que está buscando. Pensé que simplemente lo pondría allí. Además, si lo comprueba, me aseguraré de actualizar la documentación para reflejar la versión 1.2.1 . He estado ocupado con la escuela y el trabajo, así que no he tenido tiempo de hacerlo.

ACTUALIZACIÓN # 1

Sohnee mencionó la validación del lado del cliente. De hecho, estoy trabajando en una integración entre Regula y Spring 3. Espero poder liberarlo pronto (dependiendo de nuevo, en el trabajo y la escuela). La integración funciona traduciendo las restricciones de validación de Hibernate a las restricciones de validación de Regula. De esta manera, solo tiene que escribir el código de validación una vez (principalmente). Sin embargo, para las restricciones personalizadas, igual tendrá que escribir el código en el lado de Javascript (el validador personalizado). Pero una vez que anota el código en el lado del servidor con Hibernate validation-constraints, no necesita hacer nada en el lado del cliente; esas restricciones se aplican automáticamente para formar elementos en el lado del cliente.

Matthew Abbott también ha sido capaz de integrar Regula con ASP.NET MVC .

ACTUALIZACIÓN # 2

Tengo una aplicación web demo (mavenizada) en github que muestra la integración entre Regula y Spring 3.0.x Web MVC utilizando Hibernate Validator. No está realmente documentado ni nada, es más una prueba de concepto. Planeo agregar algo de documentación a la página de github sobre la integración y cómo funciona.

ACTUALIZACIÓN # 3

He actualizado la documentación en la wiki , y ahora corresponde a la última versión, 1.2.2 (hice una pequeña corrección de errores, que es la razón por la que ahora es 1.2.2 ).

Answer 3

He usado este jQuery formValidator varias veces junto con muchos entornos diferentes. Espero que ayude ya que rara vez me he pasado más de una hora preparándolo.

¡Aclamaciones!

Answer 4

Rocas de validación del lado del servidor.

Proporcione los resultados de dicha validación a través de una solicitud AJAX si lo desea ... o utilice un marco del lado del servidor que también agregará validación del lado del cliente, pero no lo escriba dos veces.

Answer 5

Vaya con los complementos de jQuery Validation. Nunca me falló hasta ahora

Answer 6

Yo diría que el complemento jQuery Validation hace un buen trabajo. Lo tengo combinado con el complemento de metadata para pasar los parámetros de validación del lado del servidor al cliente. También incluí algunos puntos clave en todos los formularios para poder usar un patrón común para la validación y algunos estados excepcionales / personalizados. Esto incluye un mensaje de alerta personalizado y una pantalla.

No hace todo lo que quiere de la caja, pero es la mejor opción y el mejor comportamiento predeterminado que he visto. Nuevamente, utilizo los metadatos (atributo "data-meta") con él. Y puede ser doblado a tu voluntad. También estoy usando metadatos para el enlace de control a elementos de entrada del lado del cliente. Esto divide mi lógica del lado del cliente del lado del servidor, pero a la larga es más fácil tratar de inyectar js desde la lógica del lado del servidor.

Answer 7

Parsley.js parece ser una buena y popular elección al momento de escribir (agosto de 2013).

Answer 8

 function isEmpty(text) {
if(text == undefined) {
    return true;
}
if(text.replace(//s+/g, '' '').length == 0) {
    return true;
}
return false;
}

function isValidBoolean(text) {
   if(text == undefined || (text.toLowerCase() != "true" &&    text.toLowerCase() != "false")) {
    return false;
}
return true;
 }

  function isValidDouble(text) {
     var out = parseFloat(text);
   if(isNaN(out)) {
    return false;
  }
  return true;
  }

  function isValidLong(text) {
var out = parseInt(text);
if(isNaN(out)) {
    return false;
}
return true;
}

 function isValidDate(text) {
if(Date.parseString(text, ''MM/dd/yyyy HH:mm:ss'') == null) {
    return false;
}
return true;
}

  function hasDuplicates(array) {
var valuesSoFar = {};
for (var i = 0; i < array.length; ++i) {
    var value = array[i];
    if (Object.prototype.hasOwnProperty.call(valuesSoFar, value)) {
        return true;
    }
    valuesSoFar[value] = true;
}
return false;
}