在验证期间,使用AJAX请求来检查DB。表格在真实时不提交

时间:2014-01-16 20:37:58

标签: ajax jquery

我有一个内部应用程序的表单,我正在使用客户端验证。这是一个完整的嵌套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;
    }
});

我没有做很多这类事情,而且我非常肯定我搞砸了一些简单的事情。

你们中的任何一个人能帮助一个兄弟吗?

提前致谢。

1 个答案:

答案 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,它可以节省你一些时间/清理你的代码。