Question

我有一个表格，我有5个div。一个总是可见的。其他四个使用style="visibility:hidden; position: absolute;"保持隐藏，并且可以通过调用add方法并执行以下操作使其可见：

.css("visibility","visible")`)

点击某个链接，可以通过调用remove方法删除并执行以下操作：

.css("visibility","hidden");`

也是。

每个div具有相同数量的输入字段（即2个输入字段）。

但是当我提交页面时，没有任何反应，当我显示我的下一个div（点击addNewDiv链接）时，我看到这两个字段旁边的两个字段都是红色的（“此字段是必需的。”）。

我尝试使用style="display:none"，但它不起作用，以下方法也不起作用：

$('#myFormId').validate({ 
        ignore: ":hidden" 
});

我不能在这里发布代码。

Answer 1

由于分号（:)是jquery中的属性而隐藏的是CSS规则，因此您需要向所有隐藏字段添加一个类，然后在添加要忽略的类时切换该类，如下所示：

$('#myFormId').validate({ 
   ignore: ".hidden" 
});

.hidden
{
    visibility: hidden;
}

Answer 2

我认为你在隐藏的表单元素中有html5必需属性。尝试将其放在需要的位置并删除静态必需属性。多部分表单在后端也很棘手。因此，请确保已根据前端设置验证。

$('#fieldID').prop('required',true);

Answer 3

这个工作正常

<form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" style="display:none;" />
    <br/>
    <input type="submit" />
</form>


$(document).ready(function () {

    $('#myform').validate({
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: true
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form');
            return false;
        }
    });

});

a {
    display: block;
    position: absolute;
    bottom: 0;
}

演示是here!

如何跳过隐藏div中的验证字段

3 个答案: