Laravel - Javascript |即使在返回false之後表單也會提交

Question

我試圖驗證用戶是否已提交，然後在用戶驗證後繼續進行表單提交。我已經編寫了驗證邏輯並且它可以工作，但是如果驗證失敗時返回false，表單仍會提交。

這裏是問題

<form method="POST" onsubmit="return verifyUser()" action="/pay_profile/{{$id->id}}" id="payment_form" name="payment_form"> 
    <div class="col-md-12"> 
     {{csrf_field()}} 
     <div class="form-group"> 
      <label class="control-label col-md-3" style="text-align: left; margin-left: 10px; font-weight: bold;">Payment Amount:</label> 
      <div style="width: 50%" class="input-group col-md-5"> 
       <input required name="amount" id="amount" type="text" class="form-control" autofocus="true" onfocus="rupee()" onkeyup="amount_in_words({{$id->loan->loan_amount - $id->loan->collected_amount}})" placeholder="Enter Amount..." > 
       <span class="input-group-btn"> 
        <button id="pay" name="pay" data-target="#stack1" data-toggle="modal" disabled class="btn red" type="button">Pay</button> 
       </span> 
      </div> 
      <div class=" form-group col-md-12" style="color: green; font-weight: bold; font-style: italic; padding-left: 250px; margin-top: 5px;" id="container"> 
      </div> 
     </div> 
    </div> 
    <div id="stack1" class="modal fade" tabindex="-1" data-width="400"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
        <h4 class="modal-title">Confirmation</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="row"> 
         <div class="col-md-12"> 
          <h4>Enter Password</h4> 
          <p> 
           <input id="password" name="password" required type="password" class="col-md-12 form-control" autofocus="true"> </p> 
           <p> 
            <div style="color: red" id="error_pwd"></div> 

           </div> 

          </div> 

         </div> 
         <div class="modal-footer"> 
          <a type="resets" style="margin-right: 30px;" data-dismiss="modal" class="btn dark btn-outline">Close</a> 
          <button type="submit" class="btn default btn-lg red">Ok</button> 
         </div> 
        </div> 
       </form> 

形式而這裏的onsubmit功能

<script type="text/javascript"> 

    function verifyUser() 
    { 
     function handleData(responseData) { 
     console.log(responseData); 
     if(responseData== 'success') 
     { 
      document.getElementById("payment_form").submit(); 
      console.log('success'); 
      return true; 
     } 
     else 
     { 
      console.log('fail'); 
      document.getElementById('error_pwd').innerHTML="<b>Wrong Password!</b>"; 
      return false; 
     }} 
      var verifyPass=document.getElementById('password').value; 
      if(!verifyPass || verifyPass.trim().length == 0) 
      { 
       var verifyPass='fail'; 
      } 

      $.ajax({ 
       url: '/verify/'+verifyPass, 
       success: function (data, status, XHR) { 
       handleData(data);} 
        }); 
    } 
    </script> 

Answer 1

只是return false，你反正提交表單（document.getElementById("payment_form").submit();）。問題來了，因爲handleData()是異步執行的。

function verifyUser() { 
 
    function handleData(responseData) { 
 
    if (responseData == 'success') { 
 
     document.getElementById("payment_form").submit(); 
 
    } else { 
 
     document.getElementById('error_pwd').innerHTML = "<b>Wrong Password!</b>"; 
 
    } 
 
    } 
 
    var verifyPass = document.getElementById('password').value; 
 
    if (verifyPass && verifyPass.trim().length > 0) { 
 
    $.ajax({ 
 
     url: '/verify/' + verifyPass, 
 
     success: function(data, status, XHR) { 
 
     handleData(data); 
 
     } 
 
    }); 
 
    } else { 
 
     document.getElementById('error_pwd').innerHTML = "<b>No password provided!</b>"; 
 
    } 
 
    //Return false to prevent form submition. 
 
    return false; 
 
}

Answer 2

你應該添加的preventDefault到你的動作

e.x：

$('.SubmitBtn').click(function(e){ 
// if fail 
    e.preventDefault(); 
    return false; 
});