表单验证前alert弹窗提前触发的技术问题咨询

原来的代码直接绑定按钮的click事件，会在表单原生验证执行前就弹出提示。要实现验证通过后再显示弹窗，需要监听表单的submit事件——因为浏览器会先完成原生验证，只有验证全部通过时才会触发表单的submit事件。

修改后的代码如下：

HTML部分（无需改动，保持原结构） #

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

<form class="form">
  <h2>Sign up</h2>
    <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>

JavaScript部分 #

$(".form").submit(function(event) {
  // 阻止表单默认提交行为，避免页面刷新或跳转
  event.preventDefault();
  // 验证通过后才会执行到这里
  alert("Form submitted successfully!");
});

关键说明： #

• 放弃绑定按钮的click事件，改为监听表单的submit事件，确保只有原生验证通过后才触发代码逻辑
• 调用event.preventDefault()是为了阻止表单默认的提交动作（如果不需要实际提交表单的话），如果后续需要提交表单，可以去掉这行或者在alert后添加提交逻辑

内容的提问来源于stack exchange，提问作者Babar Hussain