jQuery验证并提交表单

时间:2018-01-03 06:08:46

标签: javascript php jquery forms validation

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

收到此来电的成功回复后,我正在尝试将表单posts提交到我在HTML中指定的网址。

我的问题是,当这个表单发布时,它会卡在验证循环中并尝试每次验证它。

$(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

1 个答案:

答案 0 :(得分:1)

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