时间戳

首页 > 解决方案 > 为忽略步骤属性设置不显眼的验证规则

jquery - 为忽略步骤属性设置不显眼的验证规则

问题描述

我有一个表格，用户需要在其中选择出生日期。作为日期选择器，我正在使用flatpickr，它在移动设备上创建使用本机移动日期选择器的新输入字段。创建的元素如下所示：

<input type="date" step="any" min="..." max="...">

我也在使用 JQuery 不显眼的验证，但是表单验证崩溃并出现以下错误：

Step attribute on input type date is not supported

我找到了解决此错误的方法：

onReady: (selectedDates, dateStr, instance) => {
    if (instance.isMobile) {
        $(instance.mobileInput).removeAttr("step");
    }
}

但是 step 属性已从输入中完全删除，这并不好。而且这个错误更多地与不显眼的验证有关，而不是 flatpickr。我在这里找到的另一个我认为更好的解决方案添加了新的验证规则：

$("#testingform").validate({
    rules: {
        date1: {step: false}
    }
});

我知道这个验证是针对原生 JQuery 验证的，但为了简单起见，我提出了这个。（您可以通过 访问不显眼的验证规则$("form").validate().settings。）但是，此解决方案仅对具有 的特定字段有效name="date1"。是否可以设置不显眼的验证规则，例如“忽略所有步骤属性”？

编辑： 我尝试了@Sparky 提出的解决方案，但它不起作用。我试图玩弄不同输入的规则，但我无法删除它们中的任何一个。似乎在使用不显眼的包装器时.rules("remove",...)不起作用。实际上，我可以使用以下代码删除规则delete jq("form").validate().settings.rules["NameOfInput"].step。但是，这不适用于我的情况，因为 flatpickr 在没有名称的初始化后创建了新输入，所以我无法通过它访问它jq("form").validate().settings.rules

标签： jqueryjquery-validateunobtrusive-validation

解决方案

你看过 jQuery Validate 插件的文档吗？ 尽管此插件会根据任何内联属性自动设置验证规则，但您也可以使用该.rules('remove')方法动态删除任何规则。

step从元素匹配中动态删除规则，name="date1"而不删除任何 HTML 属性或更改 DOM。

$('[name="date1"]').rules('remove', 'step');

请注意，jQuery Validate 插件必须在调用此方法之前已经在页面上初始化。

此解决方案仅对 name="date1" 的一个特定字段有效。是否可以设置不显眼的验证规则，例如“忽略所有步骤属性”？

您只需更改选择器以定位所有包含step属性并包含在.each(). jQuery Validate 只会匹配目标组中的第一个元素，因此.each()必须使用。

$('[step]').each(function() {
    $(this).rules('remove', 'step');
});

推荐阅读