使用jQuery驗證器驗證單個複選框

Question

查看帖子，如https://stackoverflow.com/a/15453130/1032531，我看我如何驗證已選框的數量。

取而代之，我希望根據其他條件驗證複選框，例如是否填寫了其他輸入。

編輯。背景：輸入是用戶的家庭，工作和手機。複選框是「在家打電話給我」，「打電話給我工作」和「致電我的手機」。它們是複選框而不是單選框，因此，如果用戶選中多個複選框，用戶將得到多個響應。

我把以下內容放在一起，但是，看起來jQuery Validator只會查看給定名稱的第一個元素。我可能會更改名稱是唯一的，而不是使用[]，但是，我希望將元素作爲數組發佈到服務器。

這是如何實現的？

http://jsfiddle.net/suu44yng/

<p>one: 
    <input id="one" type="text" value="foo" /> 
</p> 
<p>two: 
    <input id="two" type="text" /> 
</p> 
<p>three: 
    <input id="three" type="text" value="bar" /> 
</p> 
<hr> 

<form id="myform"> 
    <p> 
    <input type="checkbox" name="test[]" value="1" checked data-check="one" />One</p> 
    <p> 
    <input type="checkbox" name="test[]" value="2" checked data-check="two" />Two</p> 
    <p> 
    <input type="checkbox" name="test[]" value="3" checked data-check="three" />Three</p> 
    <p> 
    <input type="submit" /> 
    </p> 
</form> 

(function() { 
    $.validator.addMethod("checkboxes", function(value, element, params) { 
     console.log(this, value, element, params); 
     console.log($(element).data('check'), $('#' + $(element).data('check')).val()); 
     console.log(!$('#one').val(),!$('#two').val(),!$('#three').val()); 
     var error = false; 
     if (value == 1 && !$('#one').val()) { 
     error = true; 
     } 
     else if (value == 2 && !$('#two').val()) { 
     error = true; 
     } 
     else if (value == 3 && !$('#three').val()) { 
     error = true; 
     } 
     console.log(error) 
     if (error) { 
     $(element).data('error', value); 
     return false; 
     } else { 
     return true; 
     } 
    }, 
    function(params, element) { 
     return $.validator.format('This checkbox is not allowed since ' + $(element).data('error') + ' is empty.') 
    }) 
})(); 

$(document).ready(function() { 

    $('#myform').validate({ 
    rules: { 
     'test[]': { 
     checkboxes: true 
     } 
    }, 
    submitHandler: function(form) { 
     alert('valid form submitted'); 
     return false; 
    } 
    }); 

}); 

Answer 1

「我也許可以更改名稱是獨一無二的，而不是」

這就是你將要做什麼。該插件使用name屬性來跟蹤輸入元素，並且如果您有多個輸入元素具有相同的name，則只會考慮第一個元素用於驗證，其他元素將被忽略。

但是，當您有一組複選框或無線電元素共享相同的name時，它們被視爲表單的單個數據點。例如：將分組設置爲required時，至少需要檢查一個。

如果您希望單獨使用自定義規則來考慮每個方法，則沒有解決方法。命名將不得不被指定爲test[1]，test[2]等

<input type="checkbox" name="test[1]" value="1" checked data-check="one" />One 
<input type="checkbox" name="test[2]" value="2" checked data-check="two" />Two 
<input type="checkbox" name="test[3]" value="3" checked data-check="three" />Three 

rules對象：

rules: { 
    'test[1]': { 
     checkboxes: true 
    }, 
    'test[2]': { 
     checkboxes: true 
    }, 
    'test[3]': { 
     checkboxes: true 
    } 
},