触发HTML5表单验证

Question

我有一个包含几个不同字段集的表单。我有一些Javascript，一次一个地向用户显示字段集。对于支持HTML5验证的浏览器，我很乐意使用它。但是，我需要按照我的条件这样做。我正在使用JQuery。当用户单击JS链接以移动到下一个字段集时，我需要在当前字段集上进行验证，并阻止用户在出现问题时继续前进。理想情况下，当用户失去对元素的关注时，将进行验证。目前无效并使用Javascript。宁愿使用本机方法。:)

Answer 1

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

$('input').blur(function(event) {

    event.target.checkValidity();

}).bind('invalid', function(event) {

    setTimeout(function() { $(event.target).focus();}, 50);

});

第一个事件checkValidity一旦失去焦点就触发每个输入元素，如果元素是，invalid则相应的事件将被第二个事件处理程序触发并捕获。这个将焦点放回元素，但这可能非常烦人，我假设你有一个更好的解决方案来通知错误。 这是我上面代码的一个工作示例。