JQuery - 預期不會提交表單

Question

我寫了一個簡單的腳本來驗證jQuery中的表單。 這些都是提交按鈕：

<button type="submit" id="submitCrear" name="submitCrear">Confirm</button> ---->Cancel button 
<button type="submit" value="cancelar" name="cancelar" id="btnCancelar">Cancel</button> ---->Confirm button 

當按下取消按鈕，形式應該不進行任何驗證發送。 opossite應該與確認按鈕一起發生。

但這是我不明白的：當我按下確認按鈕時，驗證過程正常啓動，但然後我按下取消按鈕，表單不發送，直到所有驗證完成（isValidForm變量變成'真正'）。

<script type="text/javascript"> 
    var isValidForm; 
    $(document).ready(function() {    
     $('#btnCancelar').click(function() { 
      $('form').submit(); 
     }); 

     $('#submitCrear').click(function() { 
      $('form').submit(function(){ 
       return validarForm(); 
      }); 
     }); 
    }); 

    function validarForm(){ 
     isValidForm = true; 
     $("input:text").each(function(i) { 
      if(this.value == ''){ 
       if (!$("#errorMessage"+i).length > 0) 
        addErrorMessage(this, i, '*REQUERIDO'); 
       isValidForm = false; 
      }else{ 
       removeErrorMessage(this, i); 
      } 
     }); 
     $("input:password").each(function(i) { 
      if(this.value == ''){ 
       if (!$("#errorMessage"+(i+999)).length > 0) 
        addErrorMessage(this, (i+999), '*REQUERIDO'); 
       isValidForm = false; 
      }else{ 
       if(($(this).attr('id') == 'rePassword_r') && ($(this).val() != $("#password_r").val())){ 
        if ($("#errorMessage"+(i+999)).length > 0){ 
         removeErrorMessage(this, (i+999)); 
         addErrorMessage(this, (i+999), 'The password doesn't match.'); 
        } 
        isValidForm = false; 
       }else{ 
        removeErrorMessage(this, (i+999)); 
       } 
      } 
     }); 
     return isValidForm; 
    } 

    function addErrorMessage(element, indice, mensaje){ 
     ... 

    } 

    function removeErrorMessage(element, indice){ 
     ... 
    } 
</script> 

我應該以發送帶有取消按鈕的形式，即使在驗證過程開始了嗎？

在此先感謝！

Answer 1

你有你的兩個按鈕和下面的jQuery

$(document).ready(function() {    
    $('#btnCancelar').click(function() { 
     $('form').submit(); 
    }); 

    $('#submitCrear').click(function() { 
     $('form').submit(function(){ 
      return validarForm(); 
     }); 
    }); 
}); 

了jQuery的後半部分意味着表單提交時，它會在您指定的驗證，以形式submittance驗證，而不是按鈕點擊。這就是爲什麼現在這兩個按鈕都被觸發了。

按設計，請不要提交類型的按鈕，不管提交表單嗎？所以你不應該只是改變你的jQuery：

$(document).ready(function() {    

    $('#submitCrear').click(function() { 
      return validarForm(); 
    }); 
});