jQuery .validate() 和表单提交

Question

所以我有一个带有 onsubmit="SubmitForm()" 和 $().validate() 的表格。问题是单击提交时，.validate() 有效，但 SubmitForm() 也会运行。我有点困惑，有人可以帮我吗？

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#eclub').validate({ // initialize the plugin
        rules: {
            FirstName: {
                required: true,
                minlength: 2,
            },
            LastName: {
                required: true,
                minlength: 2
            },
            'Email Address': {
                required: true,
                email: true
            },
            Zip: {
                required: true,
                minlength: 2 
            },
            DOB_Month: {
                required: true,
                minlength: 2, 
            },
            DOB_Day: {
                required: true,
                minlength: 1
            },
            over18: {
                required: true
            }
        }
    });



});

    function autoDMA() {
        var zip_code = $('#zip_code').val();
            $.ajax({
            url: 'get_zipCode.php',
            type: 'POST',
            data: {zip_code:zip_code},
            success:function(data){$('#dma_code').val(data);}
            });

    }

    function SubmitForm()
    {
        if($("#emailDeals").is(':checked')){
            document.forms['eclub'].action='http://cl.exct.net/subscribe.aspx';
            document.forms['eclub'].target='_blank';
            document.forms['eclub'].submit();
        }

        if($("#mobileDeals").is(':checked')){
            document.forms['eclub'].action='/assets/waterfall/waterfall_rest.php';
            document.forms['eclub'].submit();
        }

        return true;
    }

</script>

<div id="" style="width:60%;">
    <br/>
    <!-- <form action="http://cl.exct.net/subscribe.aspx" id="eclub" method="post" onsubmit="return validateForm(this)" style="width:100%;">  -->
    <form method="post" id="eclub" onsubmit="SubmitForm()">
        <input name="thx" value="http://papamurphys.com/Deals/ThankYou" type="hidden">
        <input name="dma" value="" type="hidden" id='dma-set' />
        <input name="dma2" value="" type="hidden" />
        <input name="MID" value="29115" type="hidden" />
        <input name="lid" value="846154" type="hidden" />
        <input name="lid" value="17516793" type="hidden" />
        <input name="SubAction" value="sub_add_update" type="hidden" />
        <input type="hidden" name="status" value="normal" />
        <input name="Birthdate" value="" type="hidden" id="bday"/>

        <div class="clearfix">
            <label for="name"><span class="bold">First Name</span></label><br />
            <input class="required" name="FirstName" type="text" placeholder="" />
        </div>
        <div class="clearfix">
            <label for="name"><span class="bold">Last Name</span></label><br />
            <input class="required" name="LastName" type="text" placeholder="" />
        </div>
        <div class="clearfix">
            <label for="email"><span class="bold">Email</span></label><br />
            <input class="required" name="Email Address" type="text" placeholder="" />
        </div>
        <div class="clearfix">
            <label for="email"><span class="bold">Mobile Number</span></label><br />
            <input class="required" name="MobileNumber" type="text" placeholder="" />
        </div>
        <div class="clearfix">
            <span class="bold">Zip/Postal Code</span><br />
            <input class="required zip" id="zip_code" name="PostalCode" type="text" onkeyup="autoDMA()" placeholder="" maxlength="5" size="5" />
        </div>
        <div class="clearfix">
            <input class="zip" id="dma_code" name="DMACode" type="text" placeholder="" maxlength="5" size="5" style="display:none;" />
        </div>
        <div class="clearfix">
            <span class="bold">Birthday</span><br />
            <input class="month user required" name="DOB_Month" type="text" placeholder="MM" maxlength="2" style="width:48px;" /> 
            <input class="day user required" name="DOB_Day" type="text" placeholder="DD" maxlength="2" style="width:48px;" />
        </div>
        <div class="clearfix">
            <input class="age user" class="required" name="emailDeals" id="emailDeals" type="checkbox"/> Sign me up for email deals
        </div>
        <div class="clearfix">
            <input class="age user" class="required" name="mobileDeals" id="mobileDeals" type="checkbox"/> Sign me up for mobile deals
        </div>
        <div class="clearfix">
            <input class="age user" class="required" name="over18" id="over18" type="checkbox"/> I'm over 18
        </div>
        <input class="join-btn" type="submit" style="float:right;line-height:14px;cursor: pointer" onclick="pageTracker._trackPageview('Forms', 'Submit', 'eClubSignUp')" value="SUBMIT" />

      <!--<input type="button" class="join-btn" value="" onclick="validateForm()" />-->
    </form>
</div>

Answer 1

为什么不在 validate() 中使用 submitHandler 回调？

$(".selector").validate({
  submitHandler: function(form) {
   $(form).ajaxSubmit();
}
});

Answer 2

正如@Mike 所说为什么使用 SubmitForm()？

无论如何你可以试试这个：

   function SubmitForm()
    {
        if ($("#eclub").valid()) 
        {
        if($("#emailDeals").is(':checked')){
            document.forms['eclub'].action='http://cl.exct.net/subscribe.aspx';
            document.forms['eclub'].target='_blank';
            document.forms['eclub'].submit();
        }

        if($("#mobileDeals").is(':checked')){
            document.forms['eclub'].action='/assets/waterfall/waterfall_rest.php';
            document.forms['eclub'].submit();
        }

        return true;
        }
        else 
        {    
        return false;
        }
    }

Answer 3

当表单有效并单击按钮时您想做的任何事情，都将在插件的 submitHandler 选项中完成。 （不是通过内联处理程序触发的外部函数）

$('#eclub').validate({
    // rules and other options,
    submitHandler: function (form) {
        if ($("#emailDeals").is(':checked')) {
            document.forms['eclub'].action = 'http://cl.exct.net/subscribe.aspx';
            document.forms['eclub'].target = '_blank';
            form.submit(); // submit the form // this is the default
        }
        if ($("#mobileDeals").is(':checked')) {
            document.forms['eclub'].action = '/assets/waterfall/waterfall_rest.php';
            form.submit(); // submit the form // this is the default
        }
    }
});

工作演示：http://jsfiddle.net/vbs32y9u/

jQuery .validate() 和表单提交

jQuery .validate() and form onsubmit

javascript

jquery

jquery-validate