Löst die Validierung auf einem Formular mit mehreren Abschnitten und unbekannten Eingabefeldern aus
Ich versuche ein komplexes Formular zu validieren und mit komplex meine ich, dass das Formular nur eines ist, aber es wurde in vier Abschnitte unterteilt und ich habe einen einfachen Assistenten erstellt, um sie anzuzeigen. Ich benutzejQuery-Validierung aber es funktioniert nicht so, wie ich es will und ich habe auch einige Zweifel daran. Beyogen aufdieses Beispiel (zweite Form) Ich habe meinen Code wie folgt gemacht:
$("#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"
}
}
});
Wenn ich gut verstehe, dann weiterkeyup Ereignisfelder sollten validiert werden und sind es nicht, da keine Fehler auftreten. Das erste Problem ist also, warum es nicht validiert wird. Was stimmt nicht mit meiner Lösung? Das zweite ist, wie ich bestätigeproduct_price undproduct_quantity nur wenn sie sichtbar sind?
In Bezug auf dasselbe Thema habe ich noch einen Zweifel: Ich erstelle mehrere Felder im laufenden Betrieb und ja, ich kenne jedes Mal ihre ID. In diesem Fall, wie wende ich Regeln auf diese Felder an?
AKTUALISIEREN
Ich finde heraus, wo das Problem liegtkeyup war, wird die Validierung anhand des Eingabenamens und nicht anhand der Eingabe-IDs vorgenommen, da ich hart bin, ist dieser Teil erledigt.
Das zweite Problem steht noch aus. Zum Beispiel kann ich drei Felder mit Namen erzeugenvariation[pprice][] und die Fliege kann aber fünf oder mehr sein oder was auch immer, wie füge ich diese Felder Regeln und Validierungsteil hinzu? Kann ich nur die Regel für hinzufügenvariation[pprice][] und es wird überprüft, egal wie viele Elemente mit dem gleichen Namen in der Form sind?
Außerdem steht der Teil der Validierungsfelder noch aus, nur wenn diese sichtbar sind
UPDATE 2
Schon seitvariation[pprice][] ist ein Array von Elementen, die ich verwenden kann$.each für sie zu bewegen und Regeln zuzuweisen?
UPDATE 3
Folgende Empfehlungen von @Sparky ändere ich meinen Code dazu:
$('#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"
}
});
});
Aber in Firebug bekomme ich diesen Fehler:
TypeError: e.validator.methods [o] ist undefiniert
Welche verhindern die Codeausführung für das Skript, was vermisse ich in diesem Fall?
UPDATE 4
Angenommen, ich kann nicht mehrere Formulare verwenden, so dass ich nur ein Formular mit vielen Abschnitten habe (usingsection tag) und ich bewege mich zwischen beiden. Ich versuche anzurufenvalidate() in gleicher form aber zweimal und validierung beistep5 hat nicht funktioniert, da Felder übergeben. Dies ist der Code, den ich dafür benutze:
Funktion validateWizard (Schritt) {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;
}
meine frage ist warum wenn form bei nicht gültig iststep5 ist es vorbei? Sollte nicht scheitern?