Question

this fiddle按预期工作 - 当用户输入无效的国家/地区代码时会显示警告。

没有form元素的

This other fiddle不起作用。输入的pattern属性似乎需要form来验证。顺便说一句，我正在做一个没有表单的复杂页面，我想用`pattern验证我的输入字段。有没有办法做到这一点？

Answer 1

这是因为验证是HTML5 表单验证（http://www.w3.org/TR/html5/forms.html#client-side-form-validation）的一部分。当有任何错误提交表单时会触发验证，提交将被取消。

要手动触发，请在元素上使用checkValidity（）函数：

$('input').blur(function(evt) {
    evt.target.checkValidity();
}).bind('invalid', function(event) {
   alert('oops');
});

http://jsfiddle.net/y66vH/3/

Answer 2

验证在<form>提交时完成。如果您想使用浏览器的自然形式验证及其相应的UI，您需要使用带有相应提交输入的<form>，以允许用户自然地提交表单。

但是，在触发提交事件之前，会触发验证。因此，您可以在使用浏览器自己的验证时阻止默认表单提交行为。

document.querySelector("form").addEventListener("submit", function (e) { e.preventDefault(); });

http://jsfiddle.net/ExplosionPIlls/2gaw3/1/

Answer 3

元素必须是表单的一部分。如果无法做到这一点，只需将form="formID"添加到“外部”元素即可。

HTML 的

<form id="form1" action="demo_form.asp">
  <input type="submit" />
</form>
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" form="form1" title="Three letter country code" />

js fiddle：http://jsfiddle.net/y66vH/1/

Answer 4

关键点是：

是的，验证适用于ajax表单。

不要使用onclick处理程序。在包装表单上使用onsubmit，并在该表单下将按钮设为type="submit"。

在提交处理程序中，立即使用if (!theFormOrInput.checkValidity()) return;之类的模式。

您必须在有效性检查后调用event.preventDefault() ，否则将无法显示浏览器弹出窗口。验证是默认操作的一部分;如果你太早取消，你会无意中选择退出。

html5输入模式属性不在表单外工作？

4 个答案: