html5验证失败时发出警报

Question

所以我需要的只是当我的html5验证失败时出现的警报,例如:

alert("Error, please fill all required fields before submitting.");

是否有某种事件可用于使用JavaScript或jQuery显示此警报？

这看起来很基本,但我在网上找不到任何关于它的东西.我能找到的只是改变直接出现在该字段上的弹出消息的方法.

我需要这个,因为我的表单跨越多个选项卡,因此显示错误消息的气泡可能并不总是出现,具体取决于用户提交表单时的位置.

Answer 1

还有的invalid情况下开火投入,如果他们没有通过验证: https://developer.mozilla.org/en-US/docs/Web/Events/invalid

使用jQuery你可以做这样的事情:

$('input[required]').on('invalid', function(e){
  alert("Error, please fill all required fields before submitting.");
});

http://jsfiddle.net/644Lou8k/1/

Answer 2

对于那些不想使用 jQuery 的人：

var requiredInput = document.getElementById('requiredField');

function showAlert(){
  alert("Error, please fill all required fields before submitting.");
}

requiredInput.addEventListener("invalid", showAlert, false);

<form action="">
  <input id="requiredField" type="text" placeholder="Required input" required>
  <button type="submit">Submit</button>
</form>