带有表单验证插件的jQuery UI对话框 [英] jQuery UI Dialog with Form Validation Plugin
问题描述
我目前正在为我的表单使用 bassistance validation插件。我正在使用一个弹出模式对话框来存放需要验证的表单,但由于某种原因,它不是在调用我的表单...我的所有ID和引用都在工作,我仍然没有成功。
I am currently using the bassistance validation plugin for my forms. And I am using a pop-up modal dialog box to house a form that needs to be validated, but for some reason it isn't calling my form... all of my ID's and references are working and I still don't any success.
也许有人可以为我揭开光明。
这是我的Javascript代码。
Perhaps someone can shed some light for me. Here is my Javascript code.
$("#addEventDialog").dialog("open");
$("#addEventDialog").dialog({
title: 'Add Event',
modal: true,
buttons: {
"Save": function() {
$("#interestForm").validate({
submitHandler: function(form) {
$("#calendarWidget2").ajaxSubmit({
target: "#calendarResponse",
dataType: 'json',
beforeSubmit: function () {
$('input[type=submit]').attr("disabled", true);
$("#calendarResponse").show('slow');
},
success: function(response, event) {
if(response.status == true) {
$('input[type=submit]').attr("disabled", false);
$("#calendarResponse").delay(5000).fadeOut('slow');
//If the widget says it's okay to refresh, refresh otherwise, consider it done
if(response.refreshEvents == '1') {
$("#calendar").fullCalendar("refetchEvents");
}
// Close the dialog box when it has saved successfully
$("#addEventDialog").dialog("destroy");
// Update the page with the reponse from the server
$("#calendarResponse").append("Successfully Added: "+ response.title +"<br />");
} else {
$("#calendarWidget2").validate();
$("#calendarResponse").append("ERROR: "+ response.status +"<br />");
}
},
error: function() {
alert("Oops... Looks like we're having some difficulties.");
}
});
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
推荐答案
我通过3个步骤解决了类似的问题:
I solved a similar issue in 3 steps:
-
将验证器附加到表单:
Attaching the validator to the form:
$('#your-form-id').validate();
点击模态表格的保存按钮后,提交表格(验证人将会被触发):
When the Save button of your modal form is clicked, submit the form (the validator will be triggered):
buttons: {
"Save": function() {
$('#your-form-id').submit();
},
将提交逻辑移动到验证器submitHandler:
Move the submit logic to the validator submitHandler:
$('#your-form-id').validate({
submitHandler: function(form) {
// do stuff
}
});
这篇关于带有表单验证插件的jQuery UI对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!