alert is shown before the validation - html

Question

$(".btn2").click(function() {
alert("Form submitted successfully!")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form">
<h2>Sign up</h1>
<br>
<input type="text" name="username" id="username" placeholder="Enter name" required>
<br>
<br>
<input type="password" name="password" id="password" placeholder="Enter password" required>
<br>
<br>
<input type="email" name="email" id="email" placeholder="Enter email" required>
<br>
<br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" id="male" value="Male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="Female">
<label for="female">Female</label>
<br>
<br>
<label for="dob">Date of birth:</label> <br>
<input type="date" name="dob" id="dob" required>
<br>
<br>
<button class="btn2" type="submit">Submit</button>
</form>

Answer 1

Well, yes. You have an event handler attached to a button.
When the button is clicked the event handler will fires, and alert will be displayed. Due to the way alert works, this will block everything until the user clicks the button on the alert dialog. Then the JS will have finished and the button's default behaviour will occur, which triggers the form submission.
Part of submission is to run the native validation process.
If you want to display the alert only after that finishes, then you will need to:
prevent the default behaviour of the button
run the validation functions manually
display the alert
trigger form submission manually