我在jquery对话框中创建了一些动态下拉列表，我想用以下规则来验证它们：应该只选择一个下拉列表。
我对Jquery还是很陌生，因此在使用Google谷歌搜索时发现它可以通过Jquery validate插件实现。
因此，我下载了Jquery validate插件并将其加载到页面上，但是我无法更正验证代码。
到目前为止，我已经创建了对话框并填充了动态控件，但是不确定如何添加动态规则。
关于此的任何建议将是有帮助的。
谢谢
填充动态控制：
if (conflictOccured) {
for (a = 0; a < selectedOoOptions.length; a++) {
if (selectedOoOptions[a].OptionId == selectedOptionId) {
var item = populateListItem(selectedOptionId, selectedOoOptions[a].Description, paidById, "OoPaidByOption2");
break;
}
}
$("#OptionsUI").empty();
$.each(OutputArray, function (obj, i) {
$('#OptionsUI').append(i);
});
OutputArray = [];
initialiseDialog();
$("#optionsDialog").dialog("open");
return false;
}
function populateListItem(optionId, description, paidById, optionName) {
return '<li>' +
'<span>' +
'<input type="hidden" id="OptionsId" value="' + optionId + '" /> </span>' +
'<span>' + description + '</span>' +
'</span><select class="select" id="OptionPaidbyList" name="'+ optionName +'">' +
'<option value="0">Select</option>' +
'<option value="1">On Rent</option>' +
'<option value="2">Paid</option>' +
'</select>' +
'</li>';
}
对话DIV
<div id="optionsDialog" title="Please select">
<form id="OptionsDialogForm">
<div id="OoOptions_div">
<p id="RuleTitle"></p>
<ul id="ooOptionsUI">
</ul>
</div>
<div id="ValidationError_div"></div>
</form>
</div>
初始化对话框
function initialiseDialog() {
var $this = this;
$("#optionsDialog").dialog({
autoOpen: false,
modal: true,
width: 650,
dialogClass: "no-close",
open: function (event, ui) {
$('#OptionsDialogForm').validate({ // initialize the plugin
// your other rules or options,
errorPlacement: function (error, element) {
error.appendTo($('#ValidationError_div'))
}
});
$('[name^="OoPaidByOption"]').each(function () { // all names starting with 'OoPaidByOption'
$(this).rules('add', { // attach same rules to each of these fields
required: {
depends: function (element) {
return $(this).closest('option:selected').val() != 0
}
},
messages: {
required: "Please select a option"
}
});
alert("rules applied");
});
},
buttons: {
OK: function (event, ui) {
if ($("#OptionsDialogForm").valid()) {
resolveConflict()
}
},
Cancel: function (event, ui) {
closeDialog();
}
}
});
}
验证规则：（此代码现已删除）
$('#ooOptionsUI > li').each(function(){
$(this).rules("add", {
option1: {
required: {
depends: function (element) {
return $('#OoPaidByOption1 option:selected').val() != 0
}
}
},
option2: {
required: {
depends: function (element) {
return $('#OoPaidByOption2 option:selected').val() != 0;
}
}
},
messages: {
option1: "Please select only one option",
option2: "Please select only one option"
},
errorPlacement: function (error, element) {
error.appendTo($('#OoValidationError_div'))
}
});
});
产生的HTML：
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all no-close ui-draggable ui-resizable ui-dialog-buttons" tabindex="-1" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 650px; top: 348.5px; left: 302px; display: block;" role="dialog" aria-labelledby="ui-id-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Please select</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
<div id="optionsDialog" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0" style="width: auto; min-height: 1px; height: auto;">
<form id="OptionsDialogForm" novalidate="novalidate">
<div id="OoOptions_div">
<p id="RuleTitle"></p>
<ul id="ooOptionsUI">
<li><span>
<input type="hidden" id="OptionsId" value="1"></span><span>17" alloy wheels</span>
<select class="select valid" id="OptionPaidbyList" name="OoPaidByOption1" aria-required="true" aria-invalid="false">
<option value="0">Select</option>
<option value="1">Rental</option>
<option value="2">Paid</option>
</select></li>
<li><span>
<input type="hidden" id="Hidden1" value="2">
</span><span>18" alloy wheels </span>
<select class="select" id="Select1" name="OoPaidByOption2" aria-required="true">
<option value="0">Select</option>
<option value="1"> Rental</option>
<option value="2">Paid</option>
</select></li>
</ul>
</div>
<div id="ValidationError_div"></div>
</form>
</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>
</div>
</div>
首先让我解释为什么以下情况是完全错误的...
$('#ooOptionsUI > li').each(function(){
$(this).rules("add", {
option1: {
....
},
option2: {
....
},
messages: {
....
},
errorPlacement: function (error, element) {
....
}
});
});
您的选择器$('#ooOptionsUI > li')定位到li元素。该.rules()方法只能附着到input，textarea或select元件，而不是li元件。
您的.rules()方法包含一个字段名列表，option1和option2。由于该.rules()方法已经附加到一个字段，因此它只能包含与该字段和messages选项有关的规则列表。没有其他的。（将.rules()方法附加到字段然后在其中放入更多字段没有任何意义。）
您的.rules()方法包含该errorPlacement选项。该.rules()方法只能包含规则列表和messages选项。没有其他的。该errorPlacement选项只能放在.validate()或.setDefaults()方法的内部。
由于您有一个depends专门为一个字段编写的选项，因此您必须.rules()在每个字段上分别使用该方法。
它看起来应该更像这样...
$('#yourForm').validate({ // initialize the plugin
// your other rules or options,
errorPlacement: function (error, element) {
error.appendTo($('#OoValidationError_div'))
}
});
$('[name="myField_1"]').rules('add', { // attach rules to field 1
required: {
depends: function (element) {
return $('#OoPaidByOption1 option:selected').val() != 0
}
},
messages: {
required: "Please select only one option"
}
});
$('[name="myField_2"]').rules('add', { // attach rules to field 2
required: {
depends: function (element) {
return $('#OoPaidByOption2 option:selected').val() != 0
}
},
messages: {
required: "Please select only one option"
}
});
我看不到您呈现的HTML，但是可能有一种方法可以将所有内容组合在一起。只有在您有更通用的方式来编写depends函数时，才可以使用该函数。
这只是一个一般性的建议...
$('[name^="myField"]').each(function() { // all names starting with 'myField'
$(this).rules('add', { // attach same rules to each of these fields
required: {
depends: function (element) {
return $(this).closest('option:selected').val() != 0
}
},
messages: {
required: "Please select only one option"
}
});
});
好的，现在我明白了为什么您认为您需要这种depends选择。这不是该depends选项应如何工作的方式，在这种情况下，它是不需要的。
更改您的HTML，以使您select看起来像这样。请注意，第一个option包含value=""。
<select class="select valid" id="OptionPaidbyList" name="OoPaidByOption1" aria-required="true" aria-invalid="false">
<option value="">Select</option>
<option value="1">Rental</option>
<option value="2">Paid</option>
</select>
然后，您的.rules()方法可以简单地如下：
$('[name^="myField"]').each(function() { // all names starting with 'myField'
$(this).rules('add', { // attach same rules to each of these fields
required: true,
messages: {
required: "Please select only one option"
}
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句