Validación de activador en el formulario con múltiples secciones y campos de entrada desconocidos
Estoy tratando de validar una forma compleja y por compleja me refiero a que la forma es solo una, pero se dividió en cuatro secciones e hice un simple asistente para mostrarlas. Estoy usandoValidación de jQuery Pero no funciona como quiero y también tengo algunas dudas al respecto. Residencia eneste ejemplo (segunda forma) hice mi código de la siguiente manera:
$("#product_create").validate({
rules: {
product_name: {
required: true,
minlength: 10,
maxlength: 50
},
product_price: {
required: true,
number: true,
minlength: 2
},
product_quantity: {
required: true,
digits: true,
minlength: 1
}
},
messages: {
product_name: {
required: "El nombre del producto no se puede dejar vacío",
minlength: "El nombre del producto no puede tener menos de 10 carácteres",
maxlength: "El nombre del producto no puede tener más de 50 carácteres"
},
product_price: {
required: "Debes introducir un precio",
number: "El precio debe ser un número decimal o no"
},
product_quantity: {
required: "Debes introducir una cantidad",
number: "La cantidad debe ser un número"
}
}
});
Si entiendo bien entonces enkeyup los campos de evento deben validarse y no lo son, ya que los errores no aparecen. Así que el primer problema con respecto a esto es: ¿por qué no se valida? ¿Qué hay de malo en mi solución? El segundo es cómo validar.product_price yproduct_quantity ¿Sólo si son visibles?
Ahora, con respecto a este mismo tema, tengo otra duda, creo varios campos sobre la marcha y sí, sé su ID cada vez, en este caso, ¿cómo aplico las reglas a esos campos?
ACTUALIZAR
Me imagino dónde está el problemakeyup was, la validación se realiza con el nombre de entrada y no con el ID de entrada, así que esta parte está terminada.
El segundo problema sigue pendiente. Por ejemplo puedo generar tres campos con nombrevariation[pprice][] y la mosca, pero pueden ser cinco o más o lo que sea, ¿cómo agrego esos campos a las reglas y la parte de validación? ¿Puedo añadir la regla paravariation[pprice][] ¿Y se validará sin importar cuántos elementos con el mismo nombre hay en el formulario?
También está pendiente la parte de validar campos solo si están visibles.
ACTUALIZACIÓN 2
Ya quevariation[pprice][] es una matriz de elementos, puedo usar$.each ¿Moverse por ellos y asignar reglas?
ACTUALIZACIÓN 3
Siguiendo las recomendaciones de @Sparky, cambio mi código a esto:
$('#variations_holder input.pprice').each(function() {
$(this).rules('add', {
required: true,
number: true,
messages: {
required: "Debes introducir un precio de la variación",
number: "El precio de la variación debe ser un valor numérico o decimal"
}
});
});
Pero en Firebug me sale este error:
TypeError: e.validator.methods [o] no está definido
¿Qué impide la ejecución de código para el script, lo que me falta en este caso?
ACTUALIZACIÓN 4
Suponiendo que no puedo usar varios formularios, así que solo tengo un formulario con muchas secciones (usandosection etiqueta) y me manejo para moverme entre cada uno. Estoy tratando de llamarvalidate() en la misma forma pero dos veces y validación enstep5 No funcionó ya que los campos pasan. Este es el código que estoy usando para eso:
función validateWizard (paso) {var is_valid = true;
switch (step) {
case 1:
if ($("#selected_category").val() === '' || $("#selected_category").val().length === 0) {
alert("Debes seleccionar una categoría antes de continuar");
is_valid = false;
}
break;
case 2:
$("#product_create").validate({
rules: {
"product[name]": {
required: true,
minlength: 10,
maxlength: 50
},
"product[price]": {
required: true,
number: true,
minlength: 2
},
"product[quantity]": {
required: true,
digits: true,
minlength: 1
},
"product[description]": {
required: true
}
},
messages: {
"product[name]": {
required: "El nombre del producto no se puede dejar vacío",
minlength: "El nombre del producto no puede tener menos de 10 carácteres",
maxlength: "El nombre del producto no puede tener más de 50 carácteres"
},
"product[price]": {
required: "Debes introducir un precio",
number: "El precio debe ser un valor numérico o decimal"
},
"product[quantity]": {
required: "Debes introducir una cantidad",
number: "La cantidad debe ser un número"
},
"product[description]": {
required: "Debes introducir una descripción del producto"
}
}
});
is_valid = $("#product_create").valid();
if (is_valid) {
$('#variations_holder input.pprice').each(function() {
pprice = $.trim(this.value);
if (!pprice.length) {
$(this).focus();
$(this).addClass('error');
is_valid = false;
} else if (!/^[1-9]\d*(\.\d+)?$/.test(pprice)) {
$(this).addClass('error');
is_valid = false;
}
});
// Validate quantity in variation
$('#variations_holder input.pqty').each(function() {
pqty = $.trim(this.value);
if (!pqty.length) {
$(this).focus();
$(this).addClass('error');
is_valid = false;
} else if (!/^[1-9]\d*$/.test(pqty)) {
$(this).addClass('error');
is_valid = false;
}
});
}
break;
case 3:
break;
case 5:
$("#product_create").validate({
rules: {
"stock[sku]": {
required: true,
minlength: 10,
maxlength: 20
},
"stock[width]": {
required: true,
number: true,
minlength: 1
},
"stock[height]": {
required: true,
number: true,
minlength: 1
},
"stock[length]": {
required: true
},
"stock[weight]": {
required: true,
number: true,
minlength: 1
},
"stock[description]": {
required: true
},
"warranty[description]": {
required: true
},
"warranty[valid_time]": {
required: true,
digits: true
}
},
messages: {
"stock[sku]": {
required: "El SKU no se puede dejar vacío",
minlength: "El SKU no puede tener menos de 10 carácteres",
maxlength: "El SKU no puede tener más de 50 carácteres"
},
"stock[width]": {
required: "Debes introducir un ancho",
number: "El ancho debe ser un número"
},
"stock[height]": {
required: "Debes introducir una altura",
number: "La altura debe ser un número"
},
"stock[length]": {
required: "Debes introducir una longitud",
number: "La longitud debe ser un número"
},
"stock[weight]": {
required: "Debes introducir un peso",
number: "El peso debe ser un número"
},
"stock[description]": {
required: "Debes introducir una descripción del stock del producto"
},
"warranty[description]": {
required: "Debes introducir una descripción de la garantía para este producto"
},
"warranty[valid_time]": {
required: "Debes introducir un período de validez",
digits: "El período de validez no es válido"
},
}
});
is_valid = $("#product_create").valid();
break;
}
return is_valid;
}
Mi pregunta es por qué si la forma no es válida enstep5 se pasa? ¿No debería fallar?