Question

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

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

你可能会问为什么我需要输入=＆＃34;数字＆＃34;或者＆＃34;要求＆＃34;然后？好吧，我需要它，因为我的框架使用它进行自己的验证。

修改

这是一个特殊的输入 - 出生数。我需要它是 number 类型（因为移动设备），但它的值主要用于＆＃34; /＆＃34; （例如860518/8757），它不是 number 类型的有效字符。所以我需要用户填写它而不用斜线（8605188757）。问题是当html5输入中填写了无效值时（例如＆＃34; fsda＆＃34;数字类型），它似乎是空的，没有值。

因此，当用户以错误的格式填充值（860518/8757）时，html验证被禁用，因此JS验证运行，它被验证为空字段。所以错误信息就像＆＃34;请填写字段出生号＆＃34; （这真的很令人困惑）而不是像＃34;抱歉，格式错误＆＃34;。

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

Answer 1

您无法为所选输入禁用HTML5验证。

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

例如，

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

注意您可以将formnovalidate与<input type=submit>，<inut type=image>或<button> - source

一起使用

有关详细信息，请转到here或here。

Answer 2

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

您可以在框架验证后删除js中的必需属性：

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

现在不会验证所选字段。

Answer 3

在以下情况下输入将有效：

具有必需的属性或必需的属性= true
不为空；不必具有attr或prop prop = true
并且没有禁用attr或禁用prop = 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>

HTML5仅对某些输入无效

3 个答案: