如果文本字段有值，则 Jquery Validate 至少需要 1 个复选框答案

【问题标题】：Jquery Validate require at least 1 checkbox if text field has a value如果文本字段有值，则 Jquery Validate 至少需要 1 个复选框
【发布时间】：2021-09-11 21:44:12
【问题描述】：

在使用 jQuery Validate 的验证场景中苦苦挣扎。如果文本字段有值，我至少需要检查 1 个复选框。我发现了如何自己要求一个组中的至少一个复选框，而不是基于来自不同字段的值。

<input type="checkbox" name="a" value="x">
<input type="checkbox" name="b" value="y">
<input type="checkbox" name="c" value="z">
<input type="text" name="textfield">

如果 'textfield' 中有任何值，则必须选中三个复选框中的至少一个。如果“文本字段”中没有值，则可以选中或不选中复选框 - 不需要。

【问题讨论】：

对于这种情况，您需要所有三个都具有完全相同的name 属性。在这种情况下，至少需要三者之一。
对于第二部分，您将使用depends 属性来切换复选框上的required 规则。
不可能全部同名。我希望有类的东西可以工作，可能需要 require_from_group。
jsfiddle.net/y2tmgf6e
是的，require_from_group 待命

标签： jquery jquery-validate

【解决方案1】：

<form id="myform">
    <input type="checkbox" class="foo" name="a" value="x">
    <input type="checkbox" class="foo" name="b" value="y">
    <input type="checkbox" class="foo" name="c" value="z">
    <input type="text" name="textfield">
    <input type="submit">
</form>

$(document).ready(function() {
    $('#myform').validate({
        rules: {
            a: {
                require_from_group: function() {
                    if ($('[name="textfield"]').is(':filled')) {
                        return [1, ".foo"];
                    }
                }
            },
            b: {
                require_from_group: function() {
                    if ($('[name="textfield"]').is(':filled')) {
                        return [1, ".foo"];
                    }
                }
            },
            c: {
                require_from_group: function() {
                    if ($('[name="textfield"]').is(':filled')) {
                        return [1, ".foo"];
                    }
                }
            },
            textfield: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            error.insertBefore(element);
        }
    });
});

https://jsfiddle.net/s62h8or1/

【讨论】：

非常感谢。

【解决方案2】：

你可以看看这个，希望对你有帮助

let checkBox_i = $("input[name='a']");
let checkBox_ii = $("input[name='b']");
let checkBox_iii = $("input[name='c']");

let text = $("input[name='textfield']");

$(':input').on('input', validateInput)

function validateInput() {
  let a = text.val().trim();
  let b = checkBox_i.is(':checked');
  let c = checkBox_ii.is(':checked');
  let d = checkBox_iii.is(':checked');

  //checks if text extsts and checks any one of checkbox is checked
  if (a.length > 0 && (b || c || d)) {
    //your code 
    $('.validStatus').text('valid input');
  } else {
    //uncheck checkbox if input is removed
    checkBox_i.prop('checked', false);
    checkBox_ii.prop('checked', false);
    checkBox_iii.prop('checked', false);

    //alert user for invalid input
    $('.validStatus').text('');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<input type="checkbox" name="a" value="x">
<input type="checkbox" name="b" value="y">
<input type="checkbox" name="c" value="z">
<input type="text" name="textfield">

<div class='validStatus'></div>

【讨论】：

他专门询问了如何使用 jQuery Validate 插件来实现这一点。