JQueryValidation-动态字段似乎破坏了验证
JQuery Validation - dynamic fields seem to break validation
我有这个:
<div id="FormContainer">
<button type="button" data-action="PrintWeightRange">Add Weight Range</button>
<form id="DynamicForm" action="php/printinputs.php" method="POST">
<!-- Fields are loaded in via JQuery and AJAX -->
</form>
</div>
其他函数将输入和按钮附加到表单。当单击提交按钮时,JQuery绑定的函数会将字段附加到表单中。
填充时的表单如下所示:
<div id="FormContainer">
<button type="button" data-action="PrintWeightRange">Add Weight Range</button>
<form id="DynamicForm" action="php/printinputs.php"
method="POST">
<button type="button" data-action="FormSubmit">Submit</button>
<fieldset data-purpose="ShippingMethodDetails">
<input type="text" value="Express Shipping" data-purpose="ShippingMethodName">
<select data-purpose="ShippingMethodType">
<option value="">Select a Shipping Method Type</option>
<option value="opt1">Fixed</option>
<option value="opt2">Weight and Location Based</option>
</select>
<select data-purpose="ShippingMethodCountry">
<option value="">Select a Location</option>
<option value="opt1">Country 1</option>
<option value="opt2">Country 2</option>
<option value="opt3">Country 3</option>
</select>
<select data-purpose="ShippingMethodRegion">
<option value="">Select a Region</option>
<option value="opt1">Region 1</option>
<option value="opt2">Region 2</option>
<option value="opt3">Region 3</option>
</select>
</fieldset>
<fieldset data-purpose="ShippingMethodWeightRange">
<input data-purpose="LowerWeight" type="number">
<select data-purpose="WeightRangeType" data-action="ChangeWeightRangeType">
<option value="andup">and up</option>
<option value="to" selected="selected">to</option>
</select>
<input data-purpose="UpperWeight" type="number">
<input data-purpose="WeightRangePrice" type="number">
<button type="button" data-action="RemoveThis">Remove</button>
</fieldset>
</form>
button[data-action='SubmitForm']
绑定了一个函数,该函数使用JQuery each()
函数循环遍历表单中的所有选择和输入,并将它们添加到两个对象中——DynamicFormValidationRules
用于传递给JQuery Validation,DynamicFormAjaxData
用于AJAX表单post。
DynamicFormValidationRules = {
"Fieldset1_ShippingMethodDetails_ShippingMethodName": {
"required": true
},
"Fieldset1_ShippingMethodDetails_ShippingMethodType": {
"required": true
},
"Fieldset1_ShippingMethodDetails_ShippingMethodCountry": {
"required": true
},
"Fieldset1_ShippingMethodDetails_ShippingMethodRegion": {
"required": true
},
"Fieldset2_ShippingMethodWeightRange_LowerWeight": {
"required": true
},
"Fieldset2_ShippingMethodWeightRange_WeightRangeType": {
"required": true
},
"Fieldset2_ShippingMethodWeightRange_UpperWeight": {
"required": true
},
"Fieldset2_ShippingMethodWeightRange_WeightRangePrice": {
"required": true
}
}
DynamicFormAjaxData = {
ShippingMethodDetails1_Fieldset1_ShippingMethodDetails_ShippingMethodCountry: ""
ShippingMethodDetails1_Fieldset1_ShippingMethodDetails_ShippingMethodName: "Express Shipping"
ShippingMethodDetails1_Fieldset1_ShippingMethodDetails_ShippingMethodRegion: ""
ShippingMethodDetails1_Fieldset1_ShippingMethodDetails_ShippingMethodType: ""
ShippingMethodWeightRange2_Fieldset2_ShippingMethodWeightRange_LowerWeight: ""
ShippingMethodWeightRange2_Fieldset2_ShippingMethodWeightRange_UpperWeight: ""
ShippingMethodWeightRange2_Fieldset2_ShippingMethodWeightRange_WeightRangePrice: ""
ShippingMethodWeightRange2_Fieldset2_ShippingMethodWeightRange_WeightRangeType: "to"
}
在将所有这些值整理到对象中之后,我调用validate函数:
$("#DynamicForm").validate({
rules: DynamicFormValidationRules,
submitHandler : ValidateDynamicFormHandler,
});
它第一次按预期进行验证。
然而,当我将另一个运输方法添加到表单中,并再次调用函数时,新字段不会被拾取并标记为有效,即使它们不是:
DynamicFormValidationRules = {
"Fieldset1_ShippingMethodDetails_ShippingMethodName": {
"required": true
},
"Fieldset1_ShippingMethodDetails_ShippingMethodType": {
"required": true
},
"Fieldset1_ShippingMethodDetails_ShippingMethodCountry": {
"required": true
},
"Fieldset1_ShippingMethodDetails_ShippingMethodRegion": {
"required": true
},
"Fieldset2_ShippingMethodWeightRange_LowerWeight": {
"required": true
},
"Fieldset2_ShippingMethodWeightRange_WeightRangeType": {
"required": true
},
"Fieldset2_ShippingMethodWeightRange_UpperWeight": {
"required": true
},
"Fieldset2_ShippingMethodWeightRange_WeightRangePrice": {
"required": true
},
"Fieldset3_ShippingMethodWeightRange_LowerWeight": {
"required": true
},
"Fieldset3_ShippingMethodWeightRange_WeightRangeType": {
"required": true
},
"Fieldset3_ShippingMethodWeightRange_UpperWeight": {
"required": true
},
"Fieldset3_ShippingMethodWeightRange_WeightRangePrice": {
"required": true
}
}
以下是相关的JavaScript:
function FormSubmit(event) {
AssignFieldIDs()
}
function AssignFieldIDs() {
console.log("AssignFieldIDs()");
var myReturn = {};
var NumFieldsets = $("#DynamicForm").find("fieldset").length;
$("#DynamicForm").find("fieldset").each(function(index, element){
var myFieldset = element;
var myFieldsetIndex = index;
var myFieldsetNumber = myFieldsetIndex + 1;
var myFieldsetPurpose = $(element).attr("data-purpose");
var myFieldsetName;
if (NumFieldsets > 1) {
myFieldsetName = myFieldsetPurpose + myFieldsetNumber
} else {
myFieldsetName = myFieldsetPurpose;
}
console.log(element);
$(myFieldset).attr("id", "Fieldset" + myFieldsetNumber + "_" + myFieldsetPurpose);
$(myFieldset).find("input, select, textarea").each(function(index,element){
myField = element
myFieldIndex = index;
myFieldNumber = index + 1;
myFieldPurpose = $(element).attr("data-purpose");
myFieldName = "Fieldset" + myFieldsetNumber + "_" + myFieldsetPurpose + "_" + myFieldPurpose; //+ myFieldsetNumber;
// $(element).attr("name", myFieldsetName + "_" + myFieldName);
$(element).attr("name", myFieldName);
$(element).attr("id", myFieldName);
DynamicFormAjaxData[myFieldsetName + "_" + myFieldName] = $(myField).val();
DynamicFormValidationRules[myFieldName] = {required : true};
});
});
PrepareFormValues();
}
function PrepareFormValues(event) {
console.log("PrepareFormValues()")
console.log("DynamicFormAjaxData")
console.log(DynamicFormAjaxData)
console.log("DynamicFormValidationRules");
console.log(DynamicFormValidationRules);
$("#DynamicForm").validate({
rules: DynamicFormValidationRules,
submitHandler : ValidateDynamicFormHandler,
});
console.log('$("#DynamicForm").valid()');
console.log($("#DynamicForm").valid());
if ($("#DynamicForm").valid() === true ) {
$("#DynamicForm").submit();
}
else
if ($("#DynamicForm").valid() === false ) {
}
}
感谢阅读!
非常感谢@SSA引导我找到答案。
我没有使用JQuery函数将所有规则附加到对象并传递,而是使用JQueryValidate的rules()
方法分别为每个字段添加规则。
function AssignFieldIDs() {
console.log("AssignFieldIDs()");
var NumFieldsets = $("#DynamicForm").find("fieldset").length;
// Form is validated here, without rules
$("#DynamicForm").validate({
submitHandler : ValidateDynamicFormHandler,
});
$("#DynamicForm").find("fieldset").each(function(index, element){
var myFieldset = element;
var myFieldsetIndex = index;
var myFieldsetNumber = myFieldsetIndex + 1;
var myFieldsetPurpose = $(element).attr("data-purpose");
var myFieldsetName;
if (NumFieldsets > 1) {
myFieldsetName = myFieldsetPurpose + myFieldsetNumber;
} else {
myFieldsetName = myFieldsetPurpose;
}
console.log(element);
$(myFieldset).attr("id", "Fieldset" + myFieldsetNumber + "_" + myFieldsetPurpose);
$(myFieldset).find("input, select, textarea").each(function(index,element){
// Creates temporary vars for field naming in the objects.
myField = element;
myFieldIndex = index;
myFieldNumber = index + 1;
myFieldPurpose = $(element).attr("data-purpose");
myFieldName = "Fieldset" + myFieldsetNumber + "_" + myFieldsetPurpose + "_" + myFieldPurpose; //+ myFieldsetNumber;
// Sets names and ids in the HTML for use by the
$(element).attr("name", myFieldName);
$(element).attr("id", myFieldName);
// Validates each field.
$(element).rules("add", {required:true});
// Adds to an object for making an AJAX post.
DynamicFormAjaxData[myFieldsetName + "_" + myFieldName] = $(myField).val();
});
});
PrepareFormValues();
}
相关文章:
- "工具提示"jQuery插件坏了
- 我的按钮坏了
- 节点JS:时间机器坏了——timekeeper.travel不做时间旅行
- HTML/JavaScript:为什么不'我的纽扣坏了
- 我的素数函数坏了,但我没有;我不知道为什么
- Uglifier是不是弄坏了我的睡衣
- 我升级了Knockout.js,现在我的模板坏了
- 为什么范围$手表坏了
- 所有的javascript都 ajax.aspnetcdn.com/ajax/ 坏了?打破所有外部引用?自周五以来
- 角度控制器功能坏了
- 谷歌可视化图表API示例坏了,如何修复它们
- 将Facebook应用程序移动到新服务器,现在它坏了
- 为什么我的代码坏了
- 野生动物园浏览器中的后退按钮坏了
- 砌体坏了(可能是经典)
- 旋转相机后,Three.js的skybox似乎坏了
- 验证不是't工作,现在我的网站也坏了
- 什么'It’我的石头剪刀坏了
- JQueryValidation-动态字段似乎破坏了验证
- JasperServer CE输入控制坏了