フォームは2回のクリックで送信する必要があります

Question

以下のコードは動作し、データをPOSTしますが、ユーザーは2回クリックして送信する必要があります。私はsubmitHandlerを使用しようとしましたが、私はクライアント側のJSの検証とAJAXに新しいので、ここで苦労しています。ありがとうございます

削除または追加する必要があるものは何ですか？

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

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

Answer 1

多くの調整を行った後で、elseチェックではなくsubmitHandlerを使用すると、正常に機能します。 以下のコードを投稿すると、他の人にも役立ちます。

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

Answer 2

あなたの間違いあなたは、あなたがクリックsubmitの検証を確認しているアヤックス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>