表单需要点击两次才能提交答案

【问题标题】：Form Needs Two Clicks to Submit表单需要点击两次才能提交
【发布时间】：2016-11-04 18:02:38
【问题描述】：

以下代码有效并发布数据，但用户需要单击两次才能提交。我试过使用 submitHandler 但我是客户端 JS 验证和 AJAX 的新手，在这里很难。谢谢你

我需要删除或添加什么？

 &lt;input type="submit" value="SUBMIT" style="float:right;" name="submit_form" id="submit_form" class="btn btn-flat btn-success w-50"&gt;

      $(document).ready(function() {
        
        $("#solid-form").submit(function(event) {
        
          $('#solid-form').validate({

            errorClass: "state-invalid",
            errorPlacement: function(error, element) {

                error.insertAfter(element.parents('.form-group'));

            },

            //Rules for validation
 

        });

          if ($(this).valid()){

            var submitContact = $('#submit_form'),
            message = $('#msg');

            submitContact.on('click', function(){
        

            var $this = $(this);
            var recaptchaResponse = grecaptcha.getResponse();
             if(recaptchaResponse.length!=0){
                $.ajax({
                    type: "POST",
                    url: 'template.php',
                    dataType: 'json',
                    cache: false,
                    data: $('#solid-form').serialize(),
                    success: function(data) {

                    if(data.info !== 'error'){
                    $this.parents('form').fadeOut("slow");
                           // $this.parents('form').find('input[type=text],textarea,select').filter(':visible').val('');
                            message.hide().removeClass('success').removeClass('error').addClass('success').html(data.msg).fadeIn('slow');
                        } else {
                            message.hide().removeClass('success').removeClass('error').addClass('error').html(data.msg).fadeIn('slow');
                        }
                      }
                    });
                 }else{
                   message.hide().removeClass('success').removeClass('error').addClass('error').html("Please validate reCaptcha.").fadeIn('slow').delay(3000).fadeOut('slow');
                 }
                });
          }
          
           event.preventDefault();

        });
        });

            

    </script>

【问题讨论】：

您的代码第一次和第二次生效
@KarthikeyanSekar 是的。现在我应该怎么做才能让它一键提交而不影响验证，以防出现错误。
你想跳过焦点，keyup，onclick监听器使用验证onfocusout: false, onkeyup: false, onclick: false

标签： jquery ajax forms submit client-side-validation

【解决方案1】：

您的错误是您检查了submit 上的验证，然后单击是触发ajaxfunc

  $(document).ready(function() {

    $('#solid-form').validate({

        errorClass: "state-invalid",
        errorPlacement: function(error, element) {

            error.insertAfter(element.parents('.form-group'));

        },

        //Rules for validation


    });

    $("#solid-form").submit(function(event) {        

event.preventDefault();
      if ($(this).valid()){

        var submitContact = $('#submit_form'),
        message = $('#msg');



        var $this = submitContact;
        var recaptchaResponse = grecaptcha.getResponse();
         if(recaptchaResponse.length!=0){
            $.ajax({
                type: "POST",
                url: 'template.php',
                dataType: 'json',
                cache: false,
                data: $('#solid-form').serialize(),
                success: function(data) {

                if(data.info !== 'error'){
                $this.parents('form').fadeOut("slow");
                       // $this.parents('form').find('input[type=text],textarea,select').filter(':visible').val('');
                        message.hide().removeClass('success').removeClass('error').addClass('success').html(data.msg).fadeIn('slow');
                    } else {
                        message.hide().removeClass('success').removeClass('error').addClass('error').html(data.msg).fadeIn('slow');
                    }
                  }
                });
             }else{
               message.hide().removeClass('success').removeClass('error').addClass('error').html("Please validate reCaptcha.").fadeIn('slow').delay(3000).fadeOut('slow');
             }
            });
      }



    });
    });



</script>

【讨论】：

现在当我点击表单字段为空时，它不会验证并重新加载页面。我在评论下方有很多验证规则 //Rules for validation
preventDefault() 移动到名为提交事件的顶部
我已经在你的代码中添加了 onfocusout 等，包括所有规则......但是当我点击提交页面刷新时！
使用submitHandler:function(){}
我也尝试了 submitHandler 但问题仍然存在......其他一些调整使它工作。谢谢兄弟的建议。我将发布对我有用的最终解决方案！

【解决方案2】：

经过多次调整并使用 submitHandler 而不是 if else 检查使其正常工作。在下面发布代码，以便它也可以帮助其他人。

$(document).ready(function() {

    $('#solid-form').validate({
        //options & rules,
        errorClass: "state-invalid",
            errorPlacement: function(error, element) {

                error.insertAfter(element.parents('.form-group'));

            },
 
            rules: {

               //Rules for validation
            },

            
            messages: {
//Messages appearing on validation
                },
   

        submitHandler: function (form) {
            // stuff to do when form is valid
            // ajax, etc?
              var submitContact = $('#submit_form'),
            message = $('#msg');

        
        

            var $this = submitContact
            var recaptchaResponse = grecaptcha.getResponse();
             if(recaptchaResponse.length!=0){
                $.ajax({
                    type: "POST",
                    url: 'package_inq.php',
                    dataType: 'json',
                    cache: false,
                    data: $('#solid-form').serialize(),
                    success: function(data) {

                    if(data.info !== 'error'){
                    $this.parents('form').fadeOut("slow");
                           // $this.parents('form').find('input[type=text],textarea,select').filter(':visible').val('');
                            message.hide().removeClass('success').removeClass('error').addClass('success').html(data.msg).fadeIn('slow');
                        } else {
                            message.hide().removeClass('success').removeClass('error').addClass('error').html(data.msg).fadeIn('slow');
                        }
                      }
                    });
                 }else{
                   message.hide().removeClass('success').removeClass('error').addClass('error').html("Please validate reCaptcha.").fadeIn('slow').delay(3000).fadeOut('slow');
                 }
               


        }
    });





});

<form action="" id="solid-form" method="POST">
  
  <input type="submit" value="SUBMIT" style="float:right;" name="submit_form" id="submit_form" class="btn btn-flat btn-success w-50">
</form>

【讨论】：