jquery驗證：在整個表單驗證後調用ajax並關閉引導模式窗體

我使用Bootstrap佈局和the jQuery Validation Plugin。我點擊一個按鈕，打開窗體的模式。用戶輸入一些數據並改進它直到一切正確。當他提交它時，應該調用ajax並關閉模式形式（但如果驗證失敗，則不應該有ajax，也不應該模態關閉）。下面是我的代碼：jquery驗證：在整個表單驗證後調用ajax並關閉引導模式窗體

Ajax調用

$('#outcomeFormDialog form').on("submit", function(event) { 
    var form = $(this); 
    $.ajax({ 
     type: form.attr('method'), 
     url: "../php/client/json.php", 
     data: form.serialize(), 
     success: function(data, status) { 
      $(this).modal('hide'); 
     } 
    }); 

    event.preventDefault(); 
});

當前驗證碼：

$('#outcomeFormDialog form').validate(
{ 
    rules: { 
    amount: { 
     money: true, 
     required: true 
    }, 
    comment: { 
     required: false 
    } 
    }, 
    highlight: function(element) { 
    $(element).closest('.control-group') 
    .removeClass('success').addClass('error'); 
    }, 
    success: function(element) { 
    element 
    .addClass('valid').closest('.control-group') 
    .removeClass('error').addClass('success'); 
    } 
});

據我瞭解，jQuery驗證的success對應於每個表單元素，而不是整個表單 - 所以檢查應該以其他方式完成整個表單驗證。

這是我的形式（鬍子驅動）：

<div id="outcomeFormDialog" class="modal hide fade" role="dialog"> 
    <form class="form-horizontal well" data-async data-target="#outcomeFormDialog" method="POST"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3 id="myModalLabel">Add outcome</h3> 
     </div> 
     <div class="modal-body"> 
      <fieldset> 
       <input name="type" type="hidden" value="add_outcome" /> 
       <div class="control-group"> 
        <label class="control-label" for="amount">Amount</label> 
        <div class="controls"> 
         <div class="input-prepend"> 
          <span class="add-on">{{ currency }}</span> 
          <input type="text" name="amount" class="input-xlarge" placeholder="00.01" /> 
         </div> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label" for="comment">Comment</label> 
        <div class="controls"> 
         <input type="text" name="comment" class="input-xlarge" placeholder="Comment here..." /> 
        </div> 
       </div> 
      </fieldset> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal">Close</button> 
      <button type="submit" class="btn btn-primary">Save outcome</button> 
     </div> 
    </form> 
</div>

來源

2013-03-30 ducin

你有關於這個插件幾個熱點問題和誤解：

你不需要submit處理程序。 submit按鈕的click事件由該插件自動捕獲和處理。
As per the docs，你應該把你的ajax放在插件的submitHandler回調選項中。

submitHandler：回調，默認值：默認值（本機）的形式提交

回調處理實際當表單是有效的提交。獲取表單作爲唯一的參數。替換默認的提交。 經過驗證後，通過Ajax提交表單的正確位置經過驗證。

假設你ajax編寫正確，重新安排你的代碼到更多的東西像這樣：

$(document).ready(function() { 

    $('#outcomeFormDialog form').validate({ // initialize plugin 
     rules: { 
      amount: { 
       // money: true, //<-- no such rule 
       required: true 
      }, 
      comment: { 
       required: false // superfluous; "false" same as leaving this rule out. 
      } 
     }, 
     highlight: function (element) { 
      $(element).closest('.control-group') 
       .removeClass('success').addClass('error'); 
     }, 
     success: function (element) { 
      element.addClass('valid').closest('.control-group') 
       .removeClass('error').addClass('success'); 
     }, 
     submitHandler: function (form) { 
      // form validates so do the ajax 
      $.ajax({ 
       type: $(form).attr('method'), 
       url: "../php/client/json.php", 
       data: $(form).serialize(), 
       success: function (data, status) { 
        // ajax done 
        // do whatever & close the modal 
        $(this).modal('hide'); 
       } 
      }); 
      return false; // ajax used, block the normal submit 
     } 
    }); 

});

工作演示：http://jsfiddle.net/duAkn/

來源

2013-03-31 04:39:40 Sparky

jquery驗證：在整個表單驗證後調用ajax並關閉引導模式窗體

回答

相關問題