使用自定义验证器对嵌套输入进行条件 jquery 验证答案

【问题标题】：Conditional jquery validation on nested inputs with custom validator使用自定义验证器对嵌套输入进行条件 jquery 验证
【发布时间】：2023-03-11 04:54:01
【问题描述】：

我有以下 HTML：

<div class='headerWithYesNo'>
    <p>Text....</p>
    <div class='choices'>
        <input type="radio" name="choices" value="yes" />
        <input type="radio" name="choices" value="no" />
    </div>
    <div class='headerWithYesNoChild hidden'>
        <input type="checkbox" />
        <input type="checkbox" />
    </div>
</div>

我有一个 jquery 验证器，要求用户选择是或否。当用户选择是时，将显示“headerWithYesNoChild”div。如果选择是，我想要求用户选择其中一个复选框。所以我添加了以下自定义验证器：

jQuery.validator.addMethod("headerWithYesNo", function(value, element) {
    //If the value === no return valid
    if (value === 'no') return true;

    var yesNoChild = $(element).closest('.headerWithYesNo').children('.headerWithYesNoChild');
    var checkedInputs = yesNoChild.find('input:checked');

    //If any inputs are checked, return valid
    if (checkedInputs.length > 0) {
        return this.optional(element);
    }

    return false;
});

我使用以下 JavaScript 添加验证器：

$('.headerWithYesNo .choices input:radio').each(function () {
    $(this).rules("add", {
        headerWithYesNo: true,
        messages: {
            headerWithYesNo: "Make a selection from the options below or select 'No'"
        }
    })
});

我添加到验证函数的唯一选项是更改错误位置：

$('form').validate({
    errorPlacement: function(error, element) {
        ... error placement logic
    }
});

这很好用……有一个问题。一旦选择是，就会在用户有机会做出选择之前触发验证。我希望在用户选择“否”（以清除任何失败的验证）或提交表单时触发验证。我怎样才能做到这一点？

【问题讨论】：

那你给.validate()打电话呢？我们需要看看你的选择。
@Sparky 刚刚添加了该逻辑。
见all options。您可以将onclick 选项设置为false 以在单击radio 按钮时禁用触发验证。然后验证只会在模糊或单击提交按钮时发生。
@Sparky，这是个好主意，但它会改变所有单选按钮的验证。我有我的表单的其他部分来验证我确实想要验证 onclick。有没有办法为该规则设置 onclick？
您不能将选项分配给字段或规则。但是，您可以编写自己的函数来覆盖默认值并使用条件将其限制为某些字段等。

标签： jquery jquery-validate

【解决方案1】：

我最终做的是在我的规则中添加depends：

$('.headerWithYesNo .choices input:radio').each(function () {
    $(this).rules("add", {
        headerWithYesNo: {
            depends: function(element) {
                var targetType = $(event.target).attr('type');
                if (element.value === 'no' || targetType === 'submit') {
                    return true;
                }
                return false;
            }
        },
        messages: {
            headerWithYesNo: "Make a selection from the options below or select 'No'"
        }
    })
});

因此，如果收音机的值为“否”，则需要将其设置为 true。或者如果目标是提交输入。但是我认为@Sparky 对 onclick 提出了一些很好的建议，我只是不知道如何将它应用到一个规则中。我愿意就此提供更多反馈。

【讨论】：