防止提交按鈕從重定向如果jQuery驗證發生

Question

我有一個表單，它具有jQuery驗證。我也有提交按鈕，它被點擊時重定向到page.html。所以當我點擊提交，如果下拉列表的值是'請選擇'，驗證會出現，但它會重定向到page.html。我如何阻止它做到這一點？我的jquery代碼：

<script>  
    $(function(){  
      function validate(id){  
       var enabled = ($("input[name='attendance" + id + "']:checked").val() == 'Yes');   
       if(enabled){    
        //Please select option is selected    
        if($("#colour" + id)[0].selectedIndex == 0){     
        alert('Please select color');     
        return false;    
        }    
        //Please select option is selected    
        if($("#shade" + id)[0].selectedIndex == 0){     
         alert('Please select shade');     
         return false;    
        } 
       }  
       return true;  
      }; 

      $("input[name^='attendance']").click(function() { 

       var id = this.name.replace('attendance', '');  
       $("#colour" + id + ", #shade" + id).prop("disabled", this.value == 'No');   
       validate(id);  
      });  
      $("input:submit").click(function(){   
       var retVal = false; 
       $.each([1, 2], function(i, val){ 
        retVal = (validate(val) || retVal); 
       }); 
       return retVal; 
      }); 
     }); 
    </script> 

Answer 1

防止表單在驗證失敗時提交調用event.preventDefault()。

Answer 2

嘗試這樣，

$(function(){  
     function validate(id){  
      var enabled = ($("input[name='attendance" + id + "']:checked").val() == 'Yes');   
      if(enabled){    
       //Please select option is selected    
       if($("#colour" + id)[0].selectedIndex == 0 || $("#shade" + id)[0].selectedIndex == 0) 
       {     
        alert('Please select color');     
        return false;    
       } 
      } 
      return true;  
     }; 

     $("input[name^='attendance']").click(function(e) { 

      var id = this.name.replace('attendance', '');  
       $("#colour" + id + ", #shade" + id).prop("disabled", this.value == 'No');   
       validate(id);  
     });  

     $("input:submit").click(function(event){   

      event.preventDefault(); 
      var retVal = false; 
      $.each([1, 2], function(i, val){ 
       retVal = (validate(val) || retVal); 
      }); 
      if(retVal){$('#formID').submit();} 
     }); 
    }); 

Answer 3

<script type="text/javascript"> 

$(document).ready(function() { 

    function validate(id){  

     var enabled = ($("input[name='attendance" + id + "']:checked").val() == 'Yes');   
     if(enabled){    
     //Please select option is selected    
     if($("#colour" + id)[0].selectedIndex == 0){ 
      alert('Please select color');     
      return false; 
     }    
     //Please select option is selected    

     if($("#shade" + id)[0].selectedIndex == 0){     

      alert('Please select shade');     
      return false;    

     } 

     }  
     return true;  

    } 
    $("input[name^='attendance']").click(function() { 
     var id = $(this).attr('id').match(/\d+(,\d+)?/)[0]; 

     var val = ($(this).val() == 'No') ? true : false; 

     $('#colour'+id).attr("disabled", val); 
     $('#shade'+id).attr("disabled", val); 

     validate(id);  

     });  

     $("input:submit").click(function(event){ 

       event.preventDefault(); 
       var retVal = false; 

       $("input[name^='attendance']").each(function(){ 

        var id = $(this).attr('id').match(/\d+(,\d+)?/)[0]; 
        retVal = (validate(id) || retVal); 

       }); 

       return retVal; 

      }); 

}); 


    </script> 

在HTML中你錯過了提交按鈕。我不清楚你的要求希望你可以修改上面的代碼。並得到結果