preventDefault without removing html5 validation
On top of you click handler, you could just check if form is valid:
// prevent default form submit if valid, otherwise, not prevent default behaviour so the HTML5 validation behaviour can take place
if($(this).closest('form')[0].checkValidity()){
e.preventDefault();
}