javascript - jquery validate - 根据条件切换字段集(带有嵌套的必填字段)

Question

Jquery 大师们，我一直在为这个问题绞尽脑汁。我正在为表单呈现系统构建一个客户端表单验证层，该系统输出如下标记(最小示例):

<form name="someName" action="someAction">
<label for="1">Product</label>
<select id="1" name="1">
  <option value="">Please Select</option>
  <option value="shoe">Shoe</option>
  <option value="hat">Hat</option>
  <option value="vest">Vest</option>
</select>

<!-- this fieldset would be enabled if select (id:1) IS NOT blank -->
<fieldset data-dep-values="" data-dep-operator="!=" data-dep-id="1" class="dependant">
    <label for="2">Brand</label>
    <input type="text" id="2" name="2" class="required">
</fieldset>

<!-- this fieldset would be enabled if select (id:1) IS blank -->
<fieldset data-dep-values="" data-dep-operator="=" data-dep-id="1" class="dependant">
    <label for="3">Other Product</label>
    <textarea id="3" name="3" class="required"></textarea>              
</fieldset>

<!-- this fieldset would be enabled if select (id:1) equals "shoe" OR "vest" -->
<fieldset data-dep-values="shoe|vest" data-dep-operator="=" data-dep-id="1" class="dependant">
    <label for="4">Material</label>
    <textarea id="4" name="4" class="required"></textarea>              
</fieldset>

<input type="submit">

</form>

示例中需要注意的一些事项:

• 所有“可能”必填的字段都标有“必填”类别
• 字段和字段集可以标记为“相关”，这意味着“如果”满足表单中的某些条件，则应需要它们。在上面的示例中，fieldset 元素上的数据属性表示逻辑。

这是我的问题。

• 验证插件是否可以为所有字段添加监听器，即使不需要或基于格式(例如数据、整数、电子邮件等)。我需要检测所有字段的更改，以测试是否有任何“依赖项”场。然后我需要根据依赖性要求测试该值。
• 如果隐藏某个依赖字段或一组字段(未满足要求)，它仍然会有标记为必填的字段。如果未启用父级(依赖组)(不满足依赖关系)，验证是否可以跳过这些字段？

我假设它会像这样运行:

1. 监听每个输入的变化
2. 当字段更改时，在表单中搜索 $('.dependant[data-dep-id="idOfChangedInput"]') 然后测试条件。如果为 true，则显示相关项并在验证规则中包含任何子“必填”字段。还隐藏并禁用任何以前启用的依赖项(如果不再满足条件)

这是一个逻辑难题，会带来令人心碎的后果。

我必须相信有一个相当基本的方法来设置这个规则，但我尝试的一切都失败了。

任何见解或建议将不胜感激。

干杯!

Answer 1

使用默认属性为每个字段集设置 id。 假设第一个字段集

<fieldset id="fs1" disabled="true"

第二个字段集

<fieldset id="fs2"

第三个字段集

<fieldset id="fs3" disabled="true"

你必须编写一个最有可能的JS函数。

function enableDisableFS() {
    var value = $("#1").val();
    if (value != "") {
        $("#fs1").removeProp("disabled");
        $("#fs2").prop("disabled", true);
        if (value == 'shoe' || value == 'vest') {
            $("#fs3").removeProp("disabled");
        } else {
            $("#fs3").prop("disabled", true);
        } 
    } else {
        $("#fs2").removeProp("disabled");
    }
}

并将 onchange() 属性添加到您的选择

<select id="1" name="1" onchange="enableDisableFS()">

如果您想在提交时验证表单，请编写另一个 JS 函数。

function validate() {
    // if else validate do here depending on your conditions.
    if (valid) {
        document.forms[0].submit;
    } else {
        alert('Validation failed');
    }
    return false;
}

您的提交按钮

<input type="button" onclick="return validate()">