表格需要两次点击提交

Question

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

我需要删除或添加什么？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

您的错误是您在submit上检查了验证，然后点击了   触发ajax func

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

Answer 2

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

＆＃13;

＆＃13;

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


        }
    });





});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;