单击“保存”时,我无法使用
Jquery Validate验证jQuery UI对话框.
这是我创建Jquery对话框的代码.它从目标href URL加载对话框：
$(document).ready(dialogForms);
function dialogForms() {
$('a.dialog-form').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.find('#return').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',modal: true,buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},'Cancel': function() {$(this).dialog('close');}
},close: function() {$(this).remove();},width: 'auto'
});
},'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
beforeSend: function(data) {
//alert("beforesend");
form.validate();
},url: form.attr('action'),data: form.serialize(),type: (form.attr('method')),dataType: 'text',error: function(data) {
alert(data);
$('#result').html(data);
},success: function(data) {
//alert("success");
$('#result').html(data);
setTimeout("reloadPage()",500);
}
});
return false;
}
调用beforeSend,但它似乎不调用validate方法,该方法位于调用Dialog的父页面上.
$(document).ready(function() {
$("#event_form").validate({
rules: {
Name: {
required: true
},Category: {
required: true
}
},messages: {
Name: "Please enter an event name",Category: "Please choose a category"
},submitHandler: function(form) {
alert("validated");
// $('#loading_1').show();
// $('#proceed_c').hide();
// $(form).ajaxSubmit();
// //form.submit();
},errorPlacement: function(error,element) {
error.appendTo(element.next(".status"));
}
});
}
问题是在commitFormWithAjax函数中的beforeSend,$(“#event_form”).validate或者submitHandler：function(form)的位置吗？任何帮助将不胜感激.
解决方法
初始化jQueryUI对话框时,它会修改DOM,整个对话框从页面中的位置取出并插入< / body>之前.标签.你可以用Firebug看到这个.这会导致Validate出现问题,因为现在表单为空.要解决此问题,请在对话框的open事件中将其附加到表单.这听起来很古怪,但相信我,它的工作:)
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},'Cancel': function() {$(this).dialog('close');}
},open: function(){
$(this).parent().appendTo($('#event_form'));
},width: 'auto'
});
编辑：
<form id='event_form'> <div id="dialog" title="DialogTitle"> </div> </form>
