触发HTML5表单验证

Question

我有一个带有几个不同字段集的表单。我有一些Javascript可以一次向用户显示字段集。对于支持HTML5验证的浏览器，我很乐意使用它。但是，我需要按我的意愿去做。我正在使用JQuery。

当用户单击JS链接以移至下一个字段集时，我需要在当前字段集上进行验证，并在出现问题时阻止用户继续前进。

理想情况下，当用户失去对某个元素的关注时，将进行验证。

目前没有使用Java进行验证。宁愿使用本机方法。:)

Answer 1

您无法触发本机验证UI，但可以轻松地在任意输入元素上利用验证API：

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

checkValidity一旦失去焦点，第一个事件就会在每个输入元素上触发，如果输入元素是第一个事件，则invalid相应的事件将被第二个事件处理程序触发并捕获。这将焦点重新定位到元素上，但这可能很烦人，我认为您有一个更好的通知错误的解决方案。