Question

我需要更好的验证逻辑，其中一些复选框和一些输入字段组合在一起。

用户必须至少检查一个复选框或必须至少填写一个输入框。

如果选中复选框或填写输入字段，则验证完整的组。

验证这种情况的最佳方法是什么？

e.g

<input class="checkbox" type="checkbox" name="check-deal" value="1" grouped="deal" >
<input class="checkbox" type="checkbox" name="check-deal" value="2" grouped="deal">
<input class="checkbox" type="checkbox" name="check-deal" value="3" grouped="deal">
<input class="checkbox" type="checkbox" name="check-deal" value="4" grouped="deal">

<input class="input-group" type="text" name="deal-name1" value="" grouped="deal">
<input class="input-group" type="text" name="deal-name2" value="" grouped="deal">

我为所有输入和复选框定义了一个额外的属性grouped，应将其分组以收集

但不知道如何验证该群体是最佳做法。

Answer 1

<强> DEMO

第1点：根据我的知识，grouped没有任何名为html的属性，但建议您使用data-*前缀属性名称如data-grouped或data-anyname 有效

第2点：我更确切地将您的checkboxes和textboxes分类为单独的div以及以下内容：

<div class="chkbox">
    <input class="checkbox" type="checkbox" name="check-deal" value="1" />
    <input class="checkbox" type="checkbox" name="check-deal" value="2" />
    <input class="checkbox" type="checkbox" name="check-deal" value="3" />
    <input class="checkbox" type="checkbox" name="check-deal" value="4" />
</div>
<div class="txtbxs">
    <input class="input-group" type="text" name="deal-name1" value="" />
    <input class="input-group" type="text" name="deal-name2" value="" />
</div>
<button class="btnValidate">Validate</button>

第3点：以下是使用jquery进行验证的方式

$('.btnValidate').on('click',function(){
    var chkLength=$('.chkbox .checkbox:checked').length; //get checkbox checked length
    var filledText=$(".txtbxs .input-group").val()!=""; 
    //get bool value whether any of the text box is filled or not
    if(chkLength || filledText) //check with or condition
        alert('valid')
    else
        alert('invalid');
});

<强>更新

<强> DEMO

正如@AkshatG在他的回答中指出的那样，我的回答中存在差异，所以我编辑了它，这是更新后的解决方案。

$('.btnValidate').on('click',function(){
    var chkLength=$('.chkbox .checkbox:checked').length;
    var filledText=false; //First set it to false
    $.each($(".txtbxs .input-group"),function(index,value){
        if($(value).val()!="")
        {
            filledText=true//if it finds any value then set it to true
            return;//break from $.each
        }
    })
    if(chkLength || filledText) 
        alert('valid')
    else
        alert('invalid');
});

Answer 2

首先需要计算每个验证的次数。然后检查两者中是否有任何一个计数大于0。如果您在第二个文本框中输入文本，Guruprasad的答案将无效，因为它不会过滤所有文本框。你必须使用过滤功能：

$("input[type='text'],textarea").filter(function() {
  return $(this).val() != "";
}).length;

这是一个jsfiddle：

http://jsfiddle.net/myfLgpdv/

希望这有帮助。

验证是否选中了至少一个复选框或填写了一个输入字段

2 个答案: