jQuery Validation 插件忽略的元素得到验证答案

【问题标题】：jQuery Validation plugin ignored elements get validatedjQuery Validation 插件忽略的元素得到验证
【发布时间】：2014-07-03 12:56:52
【问题描述】：

我使用 tje jQuery Validation Plugin 验证表单。如果浏览器支持 HTML5 datetime-local 元素，我希望不验证该输入。一切正常，除了忽略类的元素仍然得到验证。

Chrome 中的 HTML（支持本地日期时间）

<form action="/Events/EditEventInfo/37" id="EditForm" method="post" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden" value="bg5O93sGSgPSWzzsaMfKzd0FPWddBBw9ZYC4srs5xBWmJgsBKWjmD2TL0OXyQNwGl1fa7orAp08pCL1RLxzlSdbNWc9YUxxd1rxGrpw0fhgINRnd3vXoCzG5bDhe2ySk77kXfCfyEJvy-uvYRIbA8Q2">    <div class="form-horizontal">
    <div class="form-group">
        <label for="StartDate" class="control-label col-md-2">Startdatum</label>
        <div class="col-md-10">
            <input id="StartDate" name="StartDate" class="form-control ignore error" type="datetime-local" required="" aria-required="true" aria-invalid="true"><label id="StartDate-error" class="error" for="StartDate">Bitte geben sie ein Datum im Format 'dd.MM.yyyy HH:mm' an.</label>
        </div>
    </div>

    <div class="form-group">
        <label for="EndDate" class="control-label col-md-2">Enddatum</label>
        <div class="col-md-10">
            <input id="EndDate" name="EndDate" class="form-control ignore error" type="datetime-local" required="" aria-required="true"><label id="EndDate-error" class="error" for="EndDate">Bitte geben sie ein Datum im Format 'dd.MM.yyyy HH:mm' an.</label>
        </div>
    </div>

    <div class="form-group">
        <label for="Name" class="control-label col-md-2">Name</label>
        <div class="col-md-10">
            <input id="Name" name="Name" class="form-control valid" value="Party. Yolo." type="text" minlength="2" required="" aria-required="true">

        </div>
    </div>       
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Speichern" class="btn btn-default">
        </div>
    </div>
</div>

脚本：

<script type="text/javascript">    
$.validator.addMethod(
"deDateTime",
function (value, element) {
    //dd.MM.yyyy HH:mm
    var re = /^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}$/;
    return (this.optional(element) && value == "") || re.test(value);
},
"Bitte geben sie ein Datum im Format 'dd.MM.yyyy HH:mm' an."
);
if (DateTimeLocalSupport())
{
    $('#StartDate').val("@Model.StartDate.ToString("s")");
    $('#EndDate').val("@Model.EndDate.ToString("s")");
    //HTML5 input types are available, no need to validate those fields
    $('#StartDate').addClass("ignore");
    $('#EndDate').addClass("ignore");
}
else
{
    $('#StartDate').val("@Model.StartDate.ToString("dd.MM.yyyy HH:mm")");
    $('#EndDate').val("@Model.EndDate.ToString("dd.MM.yyyy HH:mm")");
}
$('#EditForm').validate({
    ignore: ".ignore :hidden",
    rules: {
        StartDate: {
            deDateTime: true
        },
        EndDate: {
            deDateTime: true
        }
    }
});
alert("Valid: " + $('#EditForm').valid());

</script>

检查 HTML5 支持、填充字段和添加类都可以正常工作。只有验证插件仍然验证它不应该验证的元素。

解决方案：

ignore: '.ignore, :hidden'

【问题讨论】：

@Sparky 我用 Chrome 渲染的 HTML 替换了 HTML。
首先，我不相信您可以通过添加和删除 ignore class 来切换此行为。 class 需要一直存在。其次，jQuery Validate 插件总是禁用 HTML5 验证。
@Sparky 当我将忽略类添加到我的 html 中的这些字段时，jQuery 仍然尝试验证它们。我有点困惑..
我认为您不需要在选择器中指定:hidden，因为该元素似乎没有被隐藏。试试看：ignore: '.ignore'~见：jqueryvalidation.org/validate/#ignore
哇咔咔。差不多就是这样。 '.ignore' 或 '.ignore, :hidden' 都可以完成这项工作。事情可以如此简单。非常感谢！

标签： javascript jquery jquery-validate

【解决方案1】：

ignore: ".ignore :hidden" 告诉它忽略类ignore 的隐藏字段。

ignore: ".ignore" 会告诉它只忽略类.ignore 的字段。

ignore: ".ignore, :hidden" 会告诉它忽略字段，将.ignore 归类为隐藏的字段。

完全不指定ignore 选项，默认为ignore: ":hidden"，它只会忽略隐藏字段。

设置为ignore: [] 告诉插件忽略任何内容并验证所有内容。

【讨论】：