我正在为此项目使用jQuery Validation Plugin,并且有一个jQuery UI对话框来确认提交表单的时间。我希望在成功验证表单后显示对话框,但我不确定该功能需要去哪里。
jQuery(document).ready(function($) {
function submitForm(response) {
$('html, body').animate({scrollTop: 0}, 'slow');
if (response.success == true) {
$('#response').html('Your application was successfully submitted.').removeClass('hide');
$('.confirm').attr('disabled', true);
}
else {
$('#response').html(response).removeClass('hide');
$('.confirm').removeAttr('disabled');
}
}
$.validator.setDefaults({
submitHandler: function() {
$.ajax({
url: 'application.php',
type: 'POST',
data: $('#application').serialize(),
dataType: 'json',
success: submitForm
});
return false;
},
showErrors: function(map, list) {
var focused = document.activeElement;
if (focused && $(focused).is('input, textarea')) {
$(this.currentForm).tooltip('close', {
currentTarget: focused
}, true)
}
this.currentElements.removeAttr('title').removeClass('ui-state-highlight');
$.each(list, function(index, error) {
$(error.element).attr('title', error.message).addClass('ui-state-highlight');
});
if (focused && $(focused).is('input, textarea')) {
$(this.currentForm).tooltip('open', {
target: focused
});
}
}
});
$('#application').tooltip({
show: false,
hide: false
});
$('#application').validate({
rules: {
name: 'required',
phone: {
require_from_group: [1, '.phone'],
phoneUS: true
},
phone_alt: {
require_from_group: [1, '.phone'],
phoneUS: true
},
email: {
required: true,
email: true
}
},
messages: {
phone: {
phoneUS: 'Please enter a valid phone number with area code.'
},
phone_alt: {
phoneUS: 'Please enter a valid phone number with area code.'
},
email: 'Please enter a valid email address.'
}
});
$('#application input:not(:submit)').addClass('ui-widget-content');
$('button, input:submit, input:button').button();
$('#dialog-confirm').dialog({
resizable: false,
height: 'auto',
modal: true,
autoOpen: false,
buttons: {
'Confirm': function() {
$(this).dialog('close');
$('.confirm').click();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
$('.confirm').click(function (e,ui) {
if (!e.isTrigger) {
e.preventDefault();
$('#dialog-confirm').dialog('open');
return false;
}
});
});
同样,这是有效的,我只想用户只需要确认一次(在表单验证后)。谢谢!
编辑:现在它正如预期的那样运行以下更改。
submitHandler: function() {
$('#dialog-confirm').dialog('open');
}
$('#dialog-confirm').dialog({
resizable: false,
height: 'auto',
modal: true,
autoOpen: false,
buttons: {
'Confirm': function() {
$(this).dialog('close');
$.ajax({
url: 'application.php',
type: 'POST',
data: $('#exhibitor-form').serialize(),
dataType: 'json',
success: submitForm
});
},
'Cancel': function() {
$(this).dialog('close');
return false;
}
}
});