html5验证失败时发出警报 [英] Alert when html5 validation fails

问题描述

所以我所需要的只是当我的html5验证失败时显示的警报，例如:

So what I need is simply an alert to appear when my html5 validation fails, like :

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

是否可以使用JavaScript或jQuery来显示此警报?

Is there some kind of event that I could use to show this alert using JavaScript or jQuery?

这似乎真的很基础，但是我在网上找不到任何东西.我所能找到的是更改直接显示在字段上的弹出消息的方法.

This seems really basic, but I couldn't find anything online about it. All I can find are ways to change the pop up message that appears directly on the field.

我需要这样做是因为我的表单跨越了多个选项卡，因此根据用户提交表单时的位置，显示错误消息的气泡可能并不总是出现.

I need this because my forms spans over multiples tabs, so the bubble displaying an error message may not always appear depending on where the user is when he submits the form.

推荐答案

如果输入未通过验证，则会在输入上触发 invalid 事件: https://developer.mozilla.org/en-US/docs/Web/Events/invalid

There's invalid event fired on inputs if they don't pass validation: https://developer.mozilla.org/en-US/docs/Web/Events/invalid

使用jQuery，您可以执行以下操作:

Using jQuery you could do something like this:

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

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

这篇关于html5验证失败时发出警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！