Question

我的网站上有一个表单。一系列函数验证表单#contactForm

上的每个表单字段

我有以下提交功能，如果所有字段都有效，则向contact-us.php发送ajax请求，然后显示成功消息。该函数有效，但我想知道这是否是这种编码的理想方式（特别是使用两（2）个return false语句）。

这是我的代码的一部分：

$('#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;
        }
});

我可以删除哪些return false条款？或者我应该取出preventDefault？

Answer 1

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

您只能在函数末尾留下一个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;
});

AJAX提交功能优化

2 个答案: