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(); 
    }); 
});