HTML5 novalidate 仅适用于某些输入答案

【问题标题】：HTML5 novalidate only for some inputsHTML5 novalidate 仅适用于某些输入
【发布时间】：2015-06-24 13:05:49
【问题描述】：

我有一个非常简单的问题 - 有没有办法仅对某些选定的输入禁用 HTML5 验证（而不是为整个表单设置“novalidate”）？

我的意思是<input type='number' requirednovalidate>。但这不起作用。

你可能会问为什么我需要 type="number" 或 "required" 呢？好吧，我需要它，因为我的框架将它用于自己的验证。

编辑

这是关于一个特殊的输入 - 出生号码。我需要它是 number 类型（因为移动设备），但它的值主要与“/”（例如 860518/8757）一起使用，这对于类型 number 来说是无效字符时间>。所以我需要用户填写它而不用斜线（8605188757）。问题是当 html5 输入中填充了无效值时（例如数字类型的“fsda”），它看起来像是空的，没有值。

因此，当用户以错误的格式（860518/8757）填写值时，html 验证被禁用，因此 JS 验证运行，它被验证为空字段。所以错误信息就像“请填写出生号码”（这真的很混乱）而不是“对不起，格式错误”。

我的解决方案是为此字段启用 html5 验证（因此当填写错误格式时会显示默认浏览器消息）但对其他字段禁用它，以便仅使用我的 JS 验证对其进行验证。

【问题讨论】：

/符号在输入类型为数字时不会出现在手机键盘上。
@A.J 我知道，但也有来自 PC 设备的流量。很多人习惯于用/ 填写这个字段。我只需要在为数字类型启用/（这很可能是不可能的）和为整个表单启用/禁用html5验证之间做出某种妥协。

标签： html validation

【解决方案1】：

您不能对所选输入禁用 HTML5 验证。

如果您想删除整个表单的验证，您可以在 input 元素中使用 formnovalidate。

例如，

<input type="submit" value="Save" class="button primary large" formnovalidate/>

注意您可以将formnovalidate与<input type=submit>、<inut type=image>或<button>一起使用-source

欲了解更多信息，请转到here 或here。

【讨论】：

这对我不起作用：<input type="number" name="futureDailyAdSpend" value="138.03" step="50" min="50" formnovalidate/>。我收到此错误：“请输入一个有效值。两个最接近的有效值是 100 和 150。”
@Ryan 好吧，既然你有 step="50"，那么值只能是 50、100、150、200、250 等，因此你不能有 value="138.03"
这里对问题有更好的解释：stackoverflow.com/questions/41522971/…
formnovalidate 仅适用于提交和图像输入，它会禁用所有浏览器验证。 “formnovalidate HTML51 如果输入元素是提交按钮或图像，则此布尔属性指定在提交之前不应验证表单。此属性覆盖元素表单所有者的 novalidate 属性。” developer.mozilla.org/en-US/docs/Web/HTML/Element/input

【解决方案2】：

novalidate属性仅用于表单标签，不能应用于表单控件。

在你的框架验证后，你可以在 js 中移除所需的属性：

$('[Selector]').removeAttr('required');

现在将不会验证所选字段。

【讨论】：

问题是我的框架 JS 验证在 html5 验证之后立即运行（这就是我默认禁用 html5 验证的原因）。无论如何，这不仅仅是关于“必需”属性。请查看我的问题的编辑。
@flipis : / 输入类型为数字时，手机键盘上不会出现/符号。
对 jQuery 投了反对票，认真的人；浏览器已经支持 JavaScript；停止转储 70KB 的我不知道如何学习真实代码！

【解决方案3】：

输入将在以下时间被验证：

需要 attr 或 prop required=true
不为空；不必有 attr required 或 prop required=true
并且没有 attr disabled 或 prop disabled=true

如果您想以特定方式验证数据，请使用模式属性。

JSFiddle

(function() {
    document.querySelector('form').addEventListener('submit', function(event) {
      event.preventDefault();
    });
})();

<form>
    1. <input type='text'><br>
    2. <input type='text' required><br>
    3. <input type='text' required disabled><br>
    4. <input type='text' value="" pattern="\d*"><br>
    5. <input type='text' value="" pattern="\d*" required><br>
    6. <input type='text' value="" pattern="\d+"><br>
    7. <input type='text' value="" pattern="\d+" required><br>
    8. <input type='text' value="test" pattern="\d+" required disabled><br>
    <button>check field validity</button>
</form>

【讨论】：