2011-07-07 11 views
6

Tengo un formulario donde un usuario puede seguir agregando elementos a una lista. Cuando vayan a enviar esta página, quiero validar que esta lista en realidad tiene elementos (no los elementos individuales, ya que ya han sido validados). Cada elemento se agrega a una nueva fila en una tabla con el TR tener un atributo adicional de "acción" ... por lo que parece:jQuery Validator - ¿Cómo validar contra elementos que no son de formulario?

<tr action="whatever">...</tr> 

Lo que estaba tratando de hacer es añadir un addMethod personalizado que llama una función que contar el número de filas con la acción como un atributo:

$("#tableID").find("tr[action]").length 

y si esta magnitud es mayor que 0, devuelve verdadero, de lo contrario, falso.

Esto funciona bien fuera de las llamadas del validador, pero por alguna razón se saltea completamente.

Realmente podría usar un ejemplo o alguna idea sobre cómo hacer que valide esta regla, aunque no sea un elemento de formulario específicamente.

en escala código:

* nota que ya tengo por defecto siendo la configuración de los mensajes y lo que no.

$.validator.addMethod("validProductList", function (value, element) { 
     return this.optional(element) || validateProductList(); 
    }, "You have no products in your list"); 

$("#processForm").click(function() { 
     $("#pageForm").validate({ 
      submitHandler: function() { 
       $("#errors").hide(); 
       //processPage(); 
      }, 
      rules: { 
       //other rules, 
       validProductList: true 
      } 
     }); 
    }); 

function validateProductList() { 
    var isValid = false; 
    var useList = $("#tblAddedProducts").find("tr[action]").length; 
    if (useList > 0) { isValid = true; } 
    return isValid; 
} 

Respuesta

7

La razón esto no funciona es porque las reglas objeto espera que sus hijos sean los nombres de campos de formulario (no descartar nombres). Parece que validate no es capaz de validar elementos que no sean form. Sin embargo, hay una manera que puede evitar esto:

  1. Añadir un <input type='hidden' /> a su formulario que actualice en función del estado de la lista. En otras palabras, cada vez que agregue o elimine un elemento de la lista, establezca el valor de esa entrada. Esto tiene una desventaja obvia; su código de validación ahora se distribuye en dos acciones (agregar y eliminar elementos de la lista). Sin embargo, imagino que ya tiene un código que maneja la adición/eliminación, puede agregar un método común que reevalúe el estado del input antes mencionado.

  2. Haga que se requiera input y use .validate() normalmente.

Aquí está un ejemplo de trabajo realmente duro: http://jsfiddle.net/dT6Yd/

Puede hacer elemento (1) un poco más fácil si se utiliza un marco como knockoutjs. Podría decirle a ese marco que "observe" su lista y actualice la entrada automáticamente sin que tenga que seguirla.

No es la manera más limpia de manejar el problema, pero lo he visto de esta manera antes y parece funcionar bastante bien.

+0

Le sigh. ¡Gracias! Temía que eso fuera lo que tenía que pasar y realmente no me gustaba agregar un solo campo oculto solo para validar otro. – Joshua

+0

El truco de campo oculto ya no funciona, ya no valida entradas ocultas en la última versión. – burzum

1

he encontrado una solución en el código fuente:

return $(this.currentForm) 
     .find("input, select, textarea, [contenteditable]") 

Así jquery-validación tiene sólo estos tipos de elementos .. simplemente he añadido el atributo "contenteditable" al elemento Quiero validar y se agregó un validador personalizado.

<div contenteditable data-rule-raty="true" data-score="0" data-plugin="rating"></div> 

$.validator.addMethod("raty-required", function (value, element, regexpr) { 
    return $(element).raty("score") >= 0; 
}, "Bitte Bewertung abgegeben"); 
+0

aprendido por las malas: Asegúrese de utilizar un elemento donde 'name' es un atributo válido:'