JQuery 验证和复选框（Chrome/Safari）答案

【问题标题】：JQuery validate and checkboxes (Chrome/Safari)JQuery 验证和复选框（Chrome/Safari）
【发布时间】：2023-03-13 18:15:02
【问题描述】：

我正在使用 jQuery Validation Plugin 1.9.0 来验证我的样式化表单。我测试过 IE7/8/9、Firefox、Safari、Chrome 和 Opera。一切正常，除了验证 Safari 和 Chrome 中的复选框。没有错误消息或阻止发布表单。有什么我可以做的吗，或者这是 Safari 和 Chrome 的问题？

复选框：

<label class="checkbox" for="joingroupkey_1">
    <input type="checkbox" class="checkbox hiddeninput" value="1" id="joingroupkey_1" name="joingroupkey">
    <div class="checkbox styled"></div>
    Newsletter 1
</label>
<label class="checkbox" for="joingroupkey_2">
    <input type="checkbox" class="checkbox hiddeninput" value="2" id="joingroupkey_2" name="joingroupkey">
    <div class="checkbox styled"></div>
    Newsletter 2
</label>
<label class="checkbox" for="joingroupkey_3">
    <input type="checkbox" class="checkbox hiddeninput" value="3" id="joingroupkey_3" name="joingroupkey">
    <div class="checkbox styled"></div>
    Newsletter 3
</label>

脚本：

$('#newsletter').validate({
    rules: {
        joingroupkey: {
            required: true,
            minlength: 1
        }
    },
    errorPlacement: function(label, element) {
        label.insertBefore(element);
    }
});

【问题讨论】：

您看到这里的问题了吗？ jsfiddle.net/LpAvu
不，似乎工作正常。老实说我不知道jsFiddle，我用哪个浏览器有什么区别吗？
不，但如果代码相同，您应该在有问题的浏览器中看到同样的问题。
所有其他验证工作正常还是您的表单中只有复选框用于输入？
我在表单中还有一些其他输入和包装 div，但除此之外它应该是相同的。我将尝试剥离其他所有内容，看看会发生什么，因为您发布的链接正在使用 Safari。是的，所有其他验证工作正常。

标签： jquery css google-chrome safari jquery-validate

【解决方案1】：

最后我在一行简单的 css 中找到了我的问题的答案：

input,textarea,select { -webkit-appearance: none; -moz-外观：无；}

当我删除这一行时，验证正在工作。

我不得不承认我不知道这对脚本有何影响，我必须从生成的 html 开始，逐行逐行，直到找到导致问题的 css。

【讨论】：

啊。您是否使用了某种样式复选框插件？ jQuery validate 默认情况下不验证隐藏字段，所以我敢打赌就是这样。
未使用任何样式插件，复选框未隐藏，但不透明度设置为 0。它们已在其他浏览器中验证。但是感谢您对此问题的投入，非常感谢:)

【解决方案2】：

另外一个 css 可以停止对 chrome 和 safari 中的复选框进行验证。（仍在 2018 年！！！）

width:0px;height:0px;

【讨论】：