我目前正在使用jquery validate插件在jquery对话框中验证我的动态字段。
当我第一次打开对话框并提交表单时，一切正常，但是当我第二次打开它时，验证没有发生。
任何人都可以建议我在哪里做错了吗？我尝试使用以下代码：
$("#regdialog").append("<caption><u><font size='5'>Patient Registration</font></u></caption>");
$("#regdialog").append("<br/>");
$("#regdialog")
.append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="firstname">'+r[0]+'</label>'))
.append($('<td align=left/>').html('<input type="text" id="firstname" name="firstname" />'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[0]+ "'/>"))
.append($('<td align=left/>').html('<label for="middlename">'+r[1]+'</label>'))
.append($('<td align=left/>').html('<input type="text" id="middlename" name="middlename" />'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[1]+ "' class=grades/>")));
$("#regdialog")
.append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="lastname">'+r[2]+'</label>'))
.append($('<td align=left/>').html('<input type="text" id="lastname" name="lastname"/>'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[2]+ "' class=grades/>"))
.append($('<td align=left/>').html('<label for="patientId">'+r[3]+'</label>'))
.append($('<td align=left/>').html('<input type="text" id="patientId" name="patientId" />'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[3]+ "' class=grades/>")));
$("#regdialog")
.append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="dateofbirth">'+r[4]+'</label>'))
.append($('<td align=left/>').html('<input type="text" readonly="true" id="dateofbirth" name="dateofbirth" />'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[4]+ "' class=grades/>"))
.append($('<td align=left/>').html('<label for="aadharNo">'+r[5]+'</label>'))
.append($('<td align=left/>').html('<input type="text" id="aadharNo" name="aadharNo"/>'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[5]+ "' class=grades/>")));
$("#dateofbirth").datepicker({dateFormat:"dd-M-yy",changeYear: true,changeMonth: true,maxDate: '@maxDate'});
$("#regdialog")
.append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="dateofreg">'+r[6]+'</label>'))
.append($('<td align=left/>').html('<input type="text" readonly="true" id="dateofreg" name="dateofreg"/>'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[6]+ "' class=grades/>"))
.append($('<td align=left/>').html('<label for="email">'+r[7]+'</label>'))
.append($('<td align=left/>').html('<input type="text" id="email" name="email" />'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[7]+ "' class=grades/>")));
$("#dateofreg").datepicker({dateFormat:"dd-M-yy",changeMonth: true,changeYear: true,maxDate: '@maxDate',minDate: '@minDate'});
$("#regdialog")
.append($('<tr width="20%"/>').append($('<td align=left/>').html('<label for="primaryPhno">'+r[8]+'</label>'))
.append($('<td align=left/>').html('<input type="text" id="primaryPhno" name="primaryPhno"/>'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[8]+ "' class=grades/>"))
.append($('<td align=left/>').html('<label for="secondaryPhno">'+r[9]+'</label>'))
.append($('<td align=left/>').html('<input type="text" id="secondaryPhno" name="secondaryPhno"/>'))
.append($('<td align=left/>').html("<input type=hidden value='"+ r1[9]+ "' class=grades/>")));
$("#regdialog").dialog({
autoOpen : true,
height : 600,
width : 1000,
modal: true,
resizable: true,
draggable:false,
closeOnEscape: true,
destroyOnClose: false,
autoResize:false,
show: {
effect: "drop",
direction: "up",
easing: "easeInQuad",
duration: 175
},
hide: {
effect: "drop",
direction: "up",
easing: "easeOutQuad",
duration: 175
},
open: function (type, data) {
$(this).wrap("<form class=\"cmxform\" id=\"registrationform\" action=\"./\"><fieldset class='ui-widget ui-widget-content ui-corner-all'></fieldset></form>");
validator=$('#registrationform').validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
patientId:{
required: true,
digits:true
},
primaryPhno:{
required: true,
number: true,
maxlength: 10
},
aadharNo:{
required: true,
number: true,
minlength: 16,
maxlength: 16
},
comments: {
required: true,
minlength: 10,
maxlength: 1000
},
},
messages: {
firstname: "Please enter your firstname",
email: "Please enter a valid email address",
patientId:{
required:"Please enter patientId",
},
primaryPhno:{
required: "PhoneNumber required",
maxlength: "Must be {0} characters"
},
aadharNo:{
required: "AadharNumber required",
minlength: "Must be {0} characters",
maxlength: "Not more than {0} characters"
},
comments: {
required: "Required Comments",
minlength: "Must be at least {0} characters",
maxlength: "Must be less than {0} characters"
},
},
});
},
close: function(event, ui) {
$(this).unwrap();
validator.resetForm();
},
buttons :
[{
id: "button-ok",
text: "Submit",
Class:"submit",
type:"submit",
click:
function() {
alert($("#registrationform").valid())
if($("#registrationform").valid())
{
$(":button:contains('Submit')").prop("disabled", true).addClass("ui-state-disabled");
savepatient();
}
return false;
}
},
{
id: "button-cancel",
text: "Cancel",
click:
function() {
$(this).unwrap();
validator.resetForm();
$(this).dialog("close");
}
}]
});
答案 0 :(得分：1)
.validate()方法用于 初始化 表单上的插件;相关部分是您只能在任何特定元素上将其称为 一次 。如果您在特定元素上多次调用它，则忽略所有后续调用。
在open选项中，您正在创建表单...
$(this).wrap("<form class=\"cmxform\" id=\"registrationform\" ...
然后在你的close选项中，你实际上正在破坏表格......
$(this).unwrap();
我建议您重新考虑有关动态包装和展开的整个方法，因为我认为插件在第一次销毁后会丢失跟踪form。
目前还不清楚为什么你认为有必要用form标签打包/解包。但是，只需将<form>标记保留在原位，只需在DOM准备就绪时调用.validate() 。