2012-08-16 119 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>