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>

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

“可能”需要的所有字段都标有“必需”类
字段和字段集可以标记为“依赖”，这意味着它们应该被要求“if”满足表单中的某些条件。在上面的示例中，fieldset元素上的数据属性表示逻辑。

这是我的问题/问题。

验证插件可以为所有字段添加监听器，即使不是必需的，也可以基于格式，如数据，int，电子邮件等。我需要检测所有字段的变化，以测试是否有任何“依赖”场。然后我需要根据依赖性要求测试该值。
如果隐藏了一个从属字段或一组字段（要求未得到满足），它仍会将字段标记为必需。如果父（依赖组）未启用（不符合依赖关系），可以验证是否跳过这些字段？

我认为它会像这样运行：

听取每个输入的更改
当字段更改时，搜索表单$('.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（）attrubute添加到您的选择

<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()">

jquery validate - 根据条件切换fieldset（带有嵌套的必填字段）

1 个答案: