jQuery 验证和提交表单

Question

我正在使用 jQuery 验证来检查登录表单。它会进行基本的输入检查，然后运行 ​​AJAX 调用以查看登录详细信息是否有效。

在收到此调用的成功响应后，我正在尝试提交表单，以便将 posts 提交到我在 HTML 中指定的 URL。

我的问题是，当此表单发布时，它会卡在验证循环中并尝试每次都对其进行验证。

$(document).ready(function() {

    ccLogin.$container = $("#form_login");

    // Login Form & Validation
    ccLogin.$container.validate({
        rules: {
            email: {
                required: true
            },

            pass: {
                required: true
            },
        },

        highlight: function(element) {
            $(element).closest('.input-group').addClass('validate-has-error');
        },

        unhighlight: function(element) {
            $(element).closest('.input-group').removeClass('validate-has-error');
        },

        submitHandler: function(ev) {

            $(".login-page").addClass('logging-in'); // This will hide the login form and init the progress bar

            // Hide Errors
            $(".form-login-error").slideUp('fast');

            // We will wait till the transition ends                
            setTimeout(function() {
                var random_pct = 25 + Math.round(Math.random() * 30);

                // The form data is submitted, we can forward the progress to 70%
                ccLogin.setPercentage(40 + random_pct);

                var formData = ccLogin.$container.serialize();

                // Send data to the server
                $.ajax({
                    url: global_base_url + "login/ajax_check_login",
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        formData: formData,
                        csrf: csrf
                    },
                    error: function() {
                        alert("An error occurred!");
                    },
                    success: function(response) {

                        // Login status [success|invalid]
                        var login_status = response.login_status;

                        // Form is fully completed, we will update the percentage
                        ccLogin.setPercentage(100);


                        // We will give some time for the animation to finish, then execute the following procedures    
                        setTimeout(function() {

                            // If login is invalid, remove the logging in class
                            if (login_status == 'invalid') {
                                $(".login-page").removeClass('logging-in');
                                ccLogin.resetProgressBar(true);
                            } else
                            if (login_status == 'success') {

                                // Redirect to login page
                                setTimeout(function() {

                                    // Post our form (causes the loop of re-validation)
                                    ccLogin.$container.submit();

                                }, 400);
                            }

                        }, 1000);
                    }
                });


            }, 650);
        }
    });

});

我的表单的 HTML：

<form action="http://localhost:8888/login/pro" id="form_login" role="form" method="post" accept-charset="utf-8">
<input type="hidden" name="csrf" value="abc123" />                                                                
<div class="form-group">
   <div class="input-group">
      <div class="input-group-addon">
         <i class="entypo-user"></i>
      </div>
      <input type="text" class="form-control" name="email" id="email" placeholder="Username" autocomplete="off" />
   </div>
</div>
<div class="form-group">
   <div class="input-group">
      <div class="input-group-addon">
         <i class="entypo-key"></i>
      </div>
      <input type="password" class="form-control" name="pass" id="pass" placeholder="Password" autocomplete="off" />
   </div>
</div>
<div class="form-group">
   <button type="submit" class="btn btn-primary btn-block btn-login">
   <i class="entypo-login"></i>
   Login
   </button>
</div>

简而言之，点击提交后，验证被触发，我对/ajax_check_login 进行了 ajax 调用。验证完成后，我正在尝试发布表单，以便数据转到/pro。然而，jQuery submit 只是再次触发验证，它卡在这个循环中。

有没有办法阻止这第二次验证，只需将其提交给指定的formAction？

Answer 1

documentation 中提到了此行为及其解决方法。而是 ccLogin.$container.submit() 做 ev.submit()