我有一个内部应用程序的表单,我正在使用客户端验证。这是一个完整的嵌套javascript事件,最后一次调用是一个AJAX请求,它检查以确保同时有两个或更少的约会书。
如果返回false(已预约2个约会),则会正确触发错误。然而,当它通过时,表单不提交,它只是坐在那里。什么也没做。好吧,在这一点上它让我生气,但它没有做任何其他事情。
$('#save-button').click(function(event){
var firstAppointmentStartHour = 9;//No appointments before 9 am
var lastAppointmentEndHour = 16;//No appointments after 4 pm
if ($('#name').val() != ''){
if ($('#address').val() != ''){
if ($('#claim_number').val() != ''){
if($('#vin').val() != ''){
if($('#plate').val() != ''){
if($('#appt_start').val() != ''){
var startDateTime = Date.parse($('#appt_start').val());
var startYear = startDateTime.getFullYear();
var startMonth = startDateTime.getMonth() + 1;
startMonth = (startMonth.toString().length == 1) ? '0' + startMonth : startMonth; //append a 0 if it is a single digit month
var startHour = startDateTime.getHours();
var stringStartHour = (startHour.toString().length == 1)? '0' + startHour : startHour; //append a 0 if it is a single digit hour
var startDay = startDateTime.getDate();
var startMinutes = startDateTime.getMinutes();
startMinutes = (startMinutes == '0') ? '00' : startMinutes;
var startTime = startHour + startMinutes/60;
var stringStartDate = startYear+'-'+startMonth+'-'+startDay+' '+stringStartHour+':'+startMinutes+':00';
if (startHour >= firstAppointmentStartHour){
if($('#appt_end').val() != ''){
var endDateTime = Date.parse($('#appt_end').val());
var endYear = endDateTime.getFullYear();
var endMonth = endDateTime.getMonth() + 1;
endMonth = (endMonth.toString().length == 1) ? '0' + endMonth : endMonth; //append a 0 if it is a single digit month
var endHour = endDateTime.getHours();
var stringEndHour = (endHour.toString().length == 1)? '0' + endHour : endHour; //append a 0 if it is a single digit hour (ie 9am)
var endDay = endDateTime.getDate();
var endMinutes = endDateTime.getMinutes();
endMinutes = (endMinutes == '0') ? '00' : endMinutes;
var endTime = endHour + endMinutes/60;
var stringEndDate = endYear+'-'+endMonth+'-'+endDay+' '+stringEndHour+':'+endMinutes+':00';
if(endHour <= lastAppointmentEndHour){
if(startDay == endDay){
if(endTime > startTime){
if ( $('#email').val() != '' || $('#phone').val() != '' ){
event.preventDefault();
$.ajax({
url: "/widgets/collision_center_appointment_calendar/check_overlap/" + stringStartDate + "/" + stringEndDate,
type: "get",
success: function(data){
if (data){
return true;
} else {
showError('**Only two bookings allowed at any time. Please adjust your start and end times**');
return false;
}
},
error:function(){
$('#current_appointments').html('There was an error submitting your information... Please contact Team Systems.');
}
});
} else {
showError('**Please enter either a valid phone number or valid email address**');
return false;
}
} else {
showError('**The appointment start time must be before the appointment end time!**');
return false;
}
} else {
showError('**Start date and end date must be the same day**');
return false;
}
} else {
showError('**The last appointment of the day cant\'t end after 4 pm**');
return false;
}
} else {
showError('**Please enter an end date and time**');
return false;
}
} else {
showError('**The first appointment of the day can\'t be prior to 9 am**');
return false;
}
} else {
showError('**Please enter a start date and time**');
return false;
}
} else {
showError('**Please enter a plate number**');
return false;
}
} else {
showError('**Please enter a VIN**');
return false;
}
} else {
showError('**Please enter a claim number**');
return false;
}
} else {
showError('**Please enter an address**');
return false;
}
} else {
showError('**Please enter a name**');
return false;
}
});
我没有做很多这类事情,而且我非常肯定我搞砸了一些简单的事情。
你们中的任何一个人能帮助一个兄弟吗?
提前致谢。
答案 0 :(得分:1)
在调用event.preventDefault()之后,不需要返回true以使表单提交,而是需要调用form.submit();
我建议这个(http://css-tricks.com/return-false-and-prevent-default/)进一步阅读return false和even.preventDefault()之间的区别,但基本上一旦调用preventDefault,调用return true将不会导致表单提交。< / p>
另外,我建议你查看一些验证库,比如parsleyjs,它可以节省你一些时间/清理你的代码。