Alert blocking “required field” pop-up

Question

I am making a form that when filled out is creates an alert telling you that it was a success and where the user is about to be redirected to. The problem is that this alert seems to be "blocking" the chrome "please fill out this field" pop-up for input fields with the required attribute that were not filled in.

It is (to my knowledge) only an Chrome problem. IE still shows the pop-up after the alert, and I have not been able to try Firefox.

For example

<form method="post" action="sendemail.php">
    <input type="text" name="name" required>
    <input type="submit" name="submit" onclick="javascript:alert('All done')">
</form>

The best result would be to only show the alert if all the required fields are filled in.

Answer 1

Simply remove the onclick and add onsubmit to the form tag:

<form method="post" action="sendemail.php" onsubmit="javascript:alert('All done')">
    <input type="text" name="name" required/>
    <input type="submit" name="submit"/>
</form>

onsubmit only fires once the form is submitted, which won't happen if a required input isn't filled in. onclick always fires when clicking the submit button, even if all fields aren't correct.