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中你错过了提交按钮。我不清楚您的要求希望您可以修改上面的代码。并得到结果

如果发生jquery验证，则阻止提交按钮重定向

3 个答案: