html - html5 输入模式属性在表单之外不起作用？

Question

这个小提琴按预期工作 - 当用户输入无效的国家代码时，它会显示警告。

没有元素的另一个小提琴form不起作用。似乎输入的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>带有对应提交输入的 a 来让用户自然提​​交表单。

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

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小提琴：http: //jsfiddle.net/y66vH/1/

Answer 4

关键点是：

1. 是的，验证适用于 ajax 表单。
2. 不要使用onclick处理程序。onsubmit在包装表格上使用，并让您的按钮type="submit"位于该表格下方。
3. 在您的提交处理程序中，使用类似的模式if (!theFormOrInput.checkValidity()) return;。
4. 您必须在有效性检查event.preventDefault() 后调用，否则浏览器弹出窗口将不会显示。验证是默认操作的一部分；如果您过早取消，您会无意中选择退出。