通過javascript觸發提交按鈕時進行表單驗證

Question

我有一個在模式中打開的窗體。我想爲此實現驗證。但是，我試圖實現jQuery表單驗證，但徒勞無功。無法觸發表單驗證的主要原因是表單提交按鈕是使用JavaScript觸發的。表單提交時不會執行驗證部分。

這是什麼工作？

這裏是形式::

<div id="__paymentModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Make Payment Request</h3> 
    </div> 
    <div class="modal-body">   
     <form method="post" action="" id="__paymentForm" class="form-horizontal"> 
      <input type="text" name="name" value="" placeholder="Payee Name"> 
      <input type="text" name="phone" value="" placeholder="Phone"/> 
      <input type="text" name="address" value="" placeholder="Address"/> 
      <input type="text" name="pincode" value="" placeholder="Pincode" /> 
      <input type="text" name="amount" value="" placeholder="Amount"/> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true" onclick="javascript: reset()">Close</button> 
     <button class="btn btn-primary" onclick="javascript: sendPaymentRequest()">Save changes</button> 
    </div> 
</div> 

而觸發的形式提交的JavaScript。

var paymentReqBttnObject = undefined; 

function reset() { 
    window.paymentReqBttnObject = undefined; 
} 

function openModalForPaymentReq(ele) { 
    $('#__paymentForm input[type="text"]').val(""); 
    $('#__paymentModal').modal({ backdrop: false }); 
    window.paymentReqBttnObject = ele; 
} 

function sendPaymentRequest() { 
    $.ajax({ 
     type: "post", 
     url: url, 
     data: $('#__paymentForm').serialize(), 
     processData : true, 
     dataType: 'html', 
     beforeSend: function() { 
       $('#__paymentModal').hide(); 
     }, 
     success: function(data, textStatus, xhr) { 
       var json = $.parseJSON(data); 
       if(json.success == "request_made") { 
        $(paymentReqBttnObject).addClass("btn-requested").html("Payment Requested"); 
        $(paymentReqBttnObject).unbind("click"); 
       } else { 

       } 
       window.reset(); 
     }, 
     error: function(xhr, textStatus, errorThrown) { 
      window.reset(); 

     } 
    }); 
} 

我也嘗試過jquery表單驗證，但在提交表單時仍然沒有顯示任何錯誤。它馬上轉到僅更新空值的數據庫。

驗證的jQuery

$(document).ready(function(){ 
    $("#__paymentForm").validate({ 
      rules: { 
       phone: {   //input name: fullName 
        required: true, //required boolean: true/false 
        minlength: 10, 
        maxlength: 10  
       }, 
       address: { 
         required: true 
       }, 
       pincode: { 
         required: true, 
         minlength: 6, 
         maxlength: 6 
       } 
       amount: { 
         required: true 
       } 
      }, 
      messages: {    //messages to appear on error 
       phone: {   //input name: fullName 
        required: "Your Phone Number", //required boolean: true/false 
        minlength: "Correct contact number.", 
        maxlength: "Correct contact number." 
       }, 
       address: { 
         required: "Where to collect money." 
       }, 
       pincode: { 
         required: "Pincode is required to locate the city and all others.", 
         minlength: "Correct Pincode Please.", 
         maxlength: "Correect Pincode Please" 
       } 
       amount: { 
         required: "What is the amount." 
       }, 
      }, 
      submitHandler: function(form) { 
        $(form).ajaxSubmit({ 
         success: function(){ 
          alert('inside'); 
         } 
        }); 
      } 

     }); 
}) 

Answer 1

你有一些事情你的代碼錯誤：

• pin碼驗證規則後缺少,。這出現了兩次。

• 內聯事件（onClick）。 jQuery使得它很容易附加事件真的。在我的代碼替換您的在線活動與「關閉」按鈕：

  $('.modal-footer .btn').on('click', function(){ reset(); }); 
  

  這是更容易閱讀，並很好地分開你的JavaScript的HTML。在文檔中閱讀有關.on()的更多信息。

• 驗證插件在表單提交時觸發。您的原始代碼在單獨的事件處理程序中使用了ajax請求，因此該插件從未被調用過。你也有你的提交按鈕（「保存更改」）外<form>標籤這是另一個原因，它不會工作。

我搬到你的按鈕形式的內部和固定/改善你的JavaScript的其他地區，因此現在工作：http://jsfiddle.net/U2hHH/4/ - 目前的格式是不是很大，但它是正確驗證形式。

我已經將您的ajax函數組合到了submitHandler:回調函數中。阿賈克斯應該工作，但我不能保證它，所以如果它不起作用，請檢查您的瀏覽器的控制檯。

Answer 2

您必須return false;，以阻止發生的單擊事件的默認功能，像這樣：

function sendPaymentRequest() { 
    $.ajax({ 
    .... 
    }); 
    return false; // return false here 
} 

，改變你的onclick：

onclick="javascript: return sendPaymentRequest()" 

或者你可以這樣做：

onclick="javascript: sendPaymentRequest(); return false;"