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

Question

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

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

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

Step attribute on input type date is not supported

我为这个错误找到了solution：

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

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

$("#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

访问它

Answer 1

Did you look at the docs for the jQuery Validate plugin? 虽然这个插件会根据任何内联属性自动设置验证规则，但您也可以使用.rules('remove') 方法动态删除任何规则。

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

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

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

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

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

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