$(".btn2").click(function() {
  alert("Form submitted successfully!")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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  type="submit">Submit</button>
</form>

CodePudding user response：

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:

1. prevent the default behaviour of the button
2. run the validation functions manually
3. display the alert
4. trigger form submission manually