Alert when html5 validation fails

Question

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.");

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.

Answer 1

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

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/

Answer 2

For those who don't want to use 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>