如何在使用Jquery Validator驗證錯誤時避免或禁用表單提交

Question

我實際上面臨使用JQUERY Validator進行表單驗證的問題。表單即使在字段上有驗證錯誤，也會被提交。我不確定在字段中存在驗證錯誤時，我們如何禁用或不允許提交表單？當驗證錯誤發生時，我相信bootstrap驗證器會禁用按鈕。雖然在我的情況下，我使用的是JQUERY VALIDATOR，所以表單正在提交併調用一個我在提交時調用的ajax調用。請幫忙！

form id="myform" class="form-horizontal" role="form" action="processAccount" method="post"> 
        <h2><b style="color:#1E90FF;">Account</b></h2> 
        <div class="form-group"> 
         <label for="Account Number" class="col-sm-3 control-label">Account Number</label> 
         <div class="col-sm-9"> 
          <input type="text" id="accountNumber" name="accountNumber" placeholder="Account Number" class="form-control" autofocus required /> 
         <!--<span class="help-block">Last Name, First Name, eg.: Smith, Harry</span>-->      
        </div> 
        </div> 

        <div class="form-group"> 
         <label for="Company Number" class="col-sm-3 control-label">Company Number</label> 
         <div class="col-sm-9"> 
          <input type="number" min="1" id="companyNumber" name="companyNumber" placeholder="Company Number" class="form-control" value=${companyNumber} required /> 
         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-sm-9 col-sm-offset-3"> 
    <!--       <button type="submit" class="btn btn-info btn-block" onclick="doAjaxPost()">Search</button> 
    -->       
          <input type="button" style=" font-size: 18px;font-weight: bold; font-family: cursive;" id="processbutton" class="btn btn-info btn-block" value="Load" onclick="doAjaxPost()"> 

           <div id="info" style="color: green; font-weight: bold;" font-size:380%;></div>  

    <%--      <p ><strong>${message}</strong></p> 
    --%>          
         </div> 
         </div> 

       </form> <!-- /form --> 

<script> 
$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 

     rules: { 
      accountNumber: { 
       required: true, 
       minlength: 7, 
       maxlength: 7, 
       digits: true 

      }, 
      companyNumber: { 
       required: true, 
       digits: true 

      }, 
      submitHandler: function (form) { 
       console.log("Submitted!"); 
       form.submit(); 
      } 
     } 
    }); 

}); 

    </script> 



<script type="text/javascript"> 
function doAjaxPost() { 
     // get the form values 
     var accountNumber = $('#accountNumber').val(); 
     var companyNumber = $('#companyNumber').val(); 
     var token = $("meta[name='_csrf']").attr("content"); 
     var header = $("meta[name='_csrf_header']").attr("content"); 
     var num = 1; 
     $.ajax({ 
     type: "POST", 
     url: "./processAccount", 
     cache: false, 
     data: "accountNumber=" + accountNumber + "&companyNumber=" + companyNumber, 
     beforeSend: function(xhr) { 
      xhr.setRequestHeader(header, token); 
     }, 
     success: function(response){ 
      // we have the response 
      $('#info').html(response); 
      $('#accountNumber').val(''); 
      if(companyNumber!=1) 
       { 
      $('#companyNumber').val(num); 
       } 
     }, 
     error: function(e){ 
      alert('Error While Request: ' + e); 
     } 
     }); 
    } 
</script> 

新增SubmitHandler方法jQuery驗證塊下，但得到一個錯誤的請求方法「POST」不支持

submitHandler: function (form) { 
       console.log("Submitted!"); 
       // get the form values 
       var accountNumber = $('#accountNumber').val(); 
       var companyNumber = $('#companyNumber').val(); 
       var token = $("meta[name='_csrf']").attr("content"); 
       var header = $("meta[name='_csrf_header']").attr("content"); 
       var num = 1; 
       $.ajax({ 
       type: "POST", 
       url: "./processAccount", 
       dataType: "json", 
       contentType: 'application/json', 
       cache: false, 
       data: "accountNumber=" + accountNumber + "&companyNumber=" + companyNumber, 
       beforeSend: function(xhr) { 
        xhr.setRequestHeader(header, token); 
       }, 
       success: function(response){ 
        // we have the response 
        $('#info').html(response); 
        $('#accountNumber').val(''); 
        if(companyNumber!=1) 
         { 
        $('#companyNumber').val(num); 
         } 
       }, 
       error: function(e){ 
        alert('Error While Request: ' + e); 
       } 
       }); 
       form.submit(); 
      } 
      } 
    }); 
}); 

Answer 1

更改提交按鈕type="submit"並刪除上單擊處理程序。

如果您想通過AJAX發送它，您仍然可以在submitHandler回調中執行此操作。

說明：將您的點擊處理程序設置爲doAjaxPost()時，您可能會繞過驗證，並且submitHandler代碼從未執行過。

此外，你有另一個錯誤。 submitHandler應該是rules而不是小孩！它不會以你使用它的方式被調用。使用它一樣，而不是：

$('#myform').validate({ // initialize the plugin 
    submitHandler: function (form) { 
     console.log("Submitted!"); 
     form.submit(); // default form submitting 
    }, 
    rules: { 
     accountNumber: { 
      required: true, 
      minlength: 7, 
      maxlength: 7, 
      digits: true 
     }, 
     companyNumber: { 
      required: true, 
      digits: true 
     } 
    } 
}); 

也看到API文檔https://jqueryvalidation.org/documentation/

對於通過AJAX發送它，你應該能夠調用你的doAjaxPost()代替form.submit(); - 在這個地方驗證已經發生了。

編輯：由於從OP whished - 這裏是如何將其與他的習慣AJAX調用寫：

submitHandler: function (form) { 
     console.log("Submitted!"); 
     doAjaxPost(); // custom AJAX call 
} 

Answer 2

我懷疑doAjaxPost（）方法是從驗證結果稱爲分開。這個方法裏面有什麼？

你能確定使用jquery validate插件嗎（項目頁面，文檔頁面......）？

Answer 3

您可以通過這樣做，只是添加此選項：

$("#myform").validate({ 
    success: function() { 
    $("button[type='submit']").prop("disabled",false);//enable your submit if success 
    }, 
    invalidHandler: function(){ 
    $("button[type='submit']").prop("disabled",true); // disable your submit if there is any errors 
    return false; //Disable post 
    } 
}); 

更多信息https://jqueryvalidation.org/validate/