爲什麼jQuery在發送表單後驗證運行？

Question

我想用jQuery validate插件驗證這個表單，但是它一旦發現錯誤就不會停止javascript代碼，所以表單被髮送到數據庫，然後才顯示錯誤。我能做些什麼來正確地鏈接這些事件？

$("#salvar-cur").live("click", function() { 
    var validator = $("#frm_curriculo").validate({ 
     rules: { 
      cur_nome: { 
       required: true 
      } 
      //other options 
     }, 
     messages: { 
      cur_nome: { 
       required: "*" 
      } 
      //other options 
     } 
    }); 
    if (validator.numberOfInvalids() == 0) { 
     alert("Success!") 
     var params = $("#frm_curriculo").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "controller/ctrl_curriculo.php", 
      data: "acao=inserir&" + params, 
      dataType: "html", 
      contentType: "application/x-www-form-urlencoded", 
      success: function() { 
       $("#frm_curriculo")[0].reset(); 
      } 
     }); 
    } 
}); 

Answer 1

首先，您在每次點擊時重新添加驗證器。你應該在事件處理程序之外做到這一點。

而且，不是檢查validator.numberOfInvalids()，嘗試檢查$("#frm_curriculo").valid()，這將驗證表單，並返回true或false。

另一個說明，如果#salvar-cur是一個提交按鈕，你會想要阻止它的默認操作。

$(function(){ 
    $("#frm_curriculo").validate({ 
     rules: { 
      cur_nome: { 
       required: true 
      } 
      //other options 
     }, 
     messages: { 
      cur_nome: { 
       required: "*" 
      } 
      //other options 
     } 
    }); 
}); 

$("#salvar-cur").live("click", function (e) { 
    e.preventDefault(); 
    if ($("#frm_curriculo").valid()) { 
     alert("Success!") 
     var params = $("#frm_curriculo").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "controller/ctrl_curriculo.php", 
      data: "acao=inserir&" + params, 
      dataType: "html", 
      contentType: "application/x-www-form-urlencoded", 
      success: function() { 
       $("#frm_curriculo")[0].reset(); 
      } 
     }); 
    } 
});