2012-08-16 68 views
1

我想使用自定义验证功能来检查是否至少有一个复选框被选中。但验证功能不会触发。我错过了什么?自定义jQuery验证功能没有触发

<!DOCTYPE html> 

<html> 
<head> 
    <title>Index</title> 
    <script type="text/javascript" src="../Scripts/jquery-1.8.0.js"></script> 
    <script type="text/javascript" src="../Scripts/jquery.validate.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $.validator.addMethod("fruits", function(value, elem, params) { 
       if($(".fruits:checkbox:checked").length > 0){ 
        return true; 
       }else { 
        return false; 
       } 
      },"pick at least one plz");​ 

      $("#form1").validate({ 
       rules:{ 
        fruits:{ 
         fruits: true 
        } 
       }, 
       submitHandler: function(form) { 
        alert("submitting..."); 
        form.submit(); 
       }, 
       invalidHandler: function(form){ 
        alert("invalid form"); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1"> 
    <input type="checkbox" class="{fruits: true}" name="fruits" id="chkApple" value="1" />Apple<br /> 
    <input type="checkbox" class="fruits: true}" name="fruits" id="chkBanana" value="2" />Banana<br /> 
    <input type="submit" value="Submit" /> 
    </form> 
</body> 
</html> 
+0

您确定脚本链接正确吗? – 2012-08-16 05:41:08

+0

我曾经有jQuery验证插件的问题。我不得不使用一个较低版本的jquery, – Parag 2012-08-16 05:42:04

回答

0

更换你的代码试试这个

http://jsfiddle.net/wtFVW/6/

+0

你的演示不起作用。它说我没有选择任何东西,即使我检查了他们两个。 – 2012-08-16 06:20:50

+0

@ Ray Cheng我真的很抱歉错误的代码,现在我已经更新了链接。再次抱歉 – Champ 2012-08-16 07:00:46

0

尝试:

$.validator.addMethod("fruits", function(value, elem, params) { 
    return $(".fruits").is(":checked") 
},"pick at least one plz");​ 
0

与此

if($(".fruits").is(":checked")){ 
0

检查此链接source

$(document).ready(function(){ 
    $('#submit_button').click(function() { 
    if (!$("input[@name='name']:checked").val()) { 
     alert('Nothing is checked!'); 
     return false; 
    } 
    else { 
     alert('One of the buttons is checked!'); 
    } 
    }); 
}); 
0

我明白了。没有触发的问题是由有问题的编码问题引起的。解决之后,调用自定义函数。但$(".fruits").is(":checked语法确实对我有用,它一直说没有选择任何东西。所以我带着for循环去了老学校。

<html> 
<head> 
    <title></title> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $.validator.addMethod("fruits", function (value, elem, params) { 
       var items = $("input[name^='fruits']"); 
       for (i = 0; i < items.length; i++) { 
        if ($(items[i]).is(":checked")) { 
         return true; 
        } 
       } 
       return false; 
      }, "pick one plz"); 

      $("#form1").validate({ 
       rules: { 
        fruits: { 
         fruits: true 
        } 
       }, 
       submitHandler: function (form) { 
        alert("submitting..."); 
        form.submit(); 
       }, 
       invalidHandler: function (form) { 
        alert("invalid form"); 
       } 
      }); 
     }); 
    </script> 
</head> 
<form id="form1"> 
<input type="checkbox" class="{fruits: true}" name="fruits" id="chkApple" value="1" />Apple<br /> 
<input type="checkbox" class="fruits: true}" name="fruits" id="chkBanana" value="2" />Banana<br /> 
<input type="submit" value="Submit" /> 
</form> 
<body> 
</body> 
</html>