改變按鈕式觸發點擊事件

Question

我有一個按鈕（HTML5）：

<form id="frmProfileEdit" method="post" action=""> 
<button id="btnProfileEdit" name="btnProfileEdit" type="button" class="btn">Bearbeiten</button> 
</form> 

在我的JS代碼，當文檔準備好事件被激發，我註冊了一個事件處理程序的按鈕一次：

var $elem; 
function registerProfileFormValidator() 
{ 
    formValidator = $("#frmProfileEdit") 
         .validate(
          { 
           rules: profileRules, 
           highlight: function (element) 
             { 
              $elem = $(element); 
              $elem.addClass("error"); 
              $elem.parents("form").find('button[type="submit"]').attr("disabled", "disabled"); 
             }, 
           unhighlight: function(element, errorClass, validClass) 
              { 
               $elem = $(element); 
               $elem.removeClass(errorClass).addClass(validClass); 
               $elem.parents("form").find('button[type="submit"]').removeAttr("disabled"); 
              }, 
           errorPlacement: function() {} 
          } 
         ); 
} 
function profileEditClick(eventArgs) 
{ 
    $('#frmProfileEdit input[type="text"]').removeAttr("disabled"); 
    $("#btnProfileEdit").text("speichern"); 
    $("#btnProfileEdit").addClass("btn-success"); 
    $("#btnProfileEdit").attr("type", "submit"); 
    $("#btnReset").removeAttr("disabled"); 
    registerProfileFormValidator(); 
} 
$(document).ready(function() 
{ 
    $("#btnProfileEdit").one("click", profileEditClick); 
}); 

那麼，爲什麼觸發點擊事件後更改類型從按鈕提交？

我使用插件jquery驗證。爲了完成，請探索一些自己的規則的形式。

Answer 1

我想你誤解了.validate()方法的用途。

它的目的是爲了初始化插件在你的窗體上，沒有別的。它只能被調用一次，因爲任何後續調用都會被忽略。一旦初始化您的表單，觸發操作將自動觸發發生各種事件，例如按鈕點擊。

將您的整個.validate()調用以外的任何click或submit處理函數和DOM ready事件處理函數。這將確保它被調用一次;並在表格構建完成後。

您也不應該有一個空的errorPlacement函數。如果您嘗試禁用表單上的錯誤位置，則可以使用return false。

$(document).ready(function() { 

    var $elem; 

    formValidator = $("#frmProfileEdit").validate({ // initialize the plugin 
     rules: profileRules, 
     highlight: function (element) { 
      $elem = $(element); 
      $elem.addClass("error"); 
      $elem.parents("form").find('button[type="submit"]').attr("disabled", "disabled"); 
     }, 
     unhighlight: function(element, errorClass, validClass) { 
      elem = $(element); 
      $elem.removeClass(errorClass).addClass(validClass); 
      $elem.parents("form").find('button[type="submit"]').removeAttr("disabled"); 
     }, 
     errorPlacement: function() { // do not leave this empty 
      return false; // disable the default function 
     } 
    }); 

    function profileEditClick(eventArgs) { 
     $('#frmProfileEdit input[type="text"]').removeAttr("disabled"); 
     $("#btnProfileEdit").text("speichern"); 
     $("#btnProfileEdit").addClass("btn-success"); 
     $("#btnProfileEdit").attr("type", "submit"); 
     $("#btnReset").removeAttr("disabled"); 
    } 

    $("#btnProfileEdit").one("click", profileEditClick); 

});