forms - AJAX submit function optimization

Question

I have a form on my site. A series of functions validate each form field on the form #contactForm

I have the following submit function which, if all the fields are valid, sends an ajax request to contact-us.php and then shows a success message. The function works, but I'm wondering if this is the ideal way to have this coded (especially with the two (2) return false statements).

Here's part of my code:

$('#contactForm').submit(function(e){ 
    if(validateContactFirstName() && validateContactLastName() && validateContactEmail() && validateContactPhone() && validateContactMessage()) {
                e.preventDefault();
                $('#contactSubmit').button('loading');
                $('#contactSubmit').attr('disabled', 'disabled');
                $.ajax({
                            type    : 'POST',
                            url     : $(this).attr('action'),
                            data    : $(this).serialize(),
                            success : function(data) {
                                            $('.hideOnSuccess').hide();
                                            $('div.contactSuccess').html('<div class="hero-unit"><h1><i class="icon-envelope-alt successIcon"></i> Thanks!</h1><p>An email confirming the details of your message has been sent to your email address. We will respond within one business day. </p></div>');                         
                                            $('html,body').animate({
                                                    scrollTop: 0
                                            }, 800);
                            }
                });
                return false;
        } else {
                return false;
        }
});

Which return false statements can I remove? Or should I take out the preventDefault ?

Answer 1

您可以使用jQuery Form 插件重写它并仅提供回调。

return false您可以在函数末尾只保留一个并删除其他。

Answer 2

我个人更喜欢使用 $.post ，它是您正在使用的简写。

http://api.jquery.com/jQuery.post/

此外，请务必防止您的表单提交默认 - 看起来像这样

$('#contactForm').submit(function(e){
    e.preventDefault();
    if(validateContactFirstName() && validateContactLastName() && validateContactEmail() && validateContactPhone() && validateContactMessage()) {
                $('#contactSubmit').button('loading');
                $('#contactSubmit').attr('disabled', 'disabled');
                $.ajax({
                            type    : 'POST',
                            url     : $(this).attr('action'),
                            data    : $(this).serialize(),
                            success : function(data) {
                                            $('.hideOnSuccess').hide();
                                            $('div.contactSuccess').html('<div class="hero-unit"><h1><i class="icon-envelope-alt successIcon"></i> Thanks!</h1><p>An email confirming the details of your message has been sent to your email address. We will respond within one business day. </p></div>');                         
                                            $('html,body').animate({
                                                    scrollTop: 0
                                            }, 800);
                            }
                });
     return false;
});