JQuery Validation在PHP表单提交时二次点击跳转问题求助

我懂你的困扰——首次点击只做了输入验证，但第二次点击不管验证结果直接跳转到test.php，这大概率是因为你没正确阻止表单的默认提交行为，或是验证逻辑的触发时机有问题。下面给你两种实用的解决方法：

方法一：绑定表单的submit事件（推荐） #

相比绑定按钮的click事件，绑定表单的submit事件更可靠，能覆盖所有触发表单提交的场景（比如用户按回车键提交）。

先补全你的表单HTML（给表单加个ID方便选择）：

<form action="test.php" method="post" id="contactForm">
  <input class="qemail" name="your-email-address" placeholder="Your email address" value="" type="text">
  <textarea class="qmessage" name="your-enquiry" rows="8" placeholder="Your enquiry"></textarea>
  <button type="submit">提交</button>
</form>

对应的JQuery验证代码：

$(document).ready(function() {
  $('#contactForm').on('submit', function(event) {
    // 第一步：先阻止表单的默认跳转行为
    event.preventDefault();
    
    // 第二步：执行你的验证逻辑
    let isValid = true;
    const emailVal = $('.qemail').val().trim();
    const messageVal = $('.qmessage').val().trim();
    
    // 验证邮箱格式
    if (!emailVal || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailVal)) {
      alert('请输入有效的邮箱地址');
      isValid = false;
    }
    
    // 验证消息内容长度
    if (!messageVal || messageVal.length < 5) {
      alert('请输入至少5个字符的咨询内容');
      isValid = false;
    }
    
    // 第三步：验证通过后，手动触发表单提交
    if (isValid) {
      this.submit(); // 这里会让表单正常跳转到test.php
    }
  });
});

方法二：绑定按钮的click事件（适配你的原有逻辑） #

如果你坚持用按钮点击事件来触发验证，只要确保每次点击都先做验证，不通过就阻止提交：

$(document).ready(function() {
  $('button[type="submit"]').on('click', function(event) {
    let isValid = true;
    const emailVal = $('.qemail').val().trim();
    const messageVal = $('.qmessage').val().trim();
    
    // 同样的验证逻辑
    if (!emailVal || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailVal)) {
      alert('请输入有效的邮箱地址');
      isValid = false;
    }
    if (!messageVal || messageVal.length < 5) {
      alert('请输入至少5个字符的咨询内容');
      isValid = false;
    }
    
    // 验证不通过时，阻止表单跳转
    if (!isValid) {
      event.preventDefault();
    }
    // 验证通过的话，表单会自动按action属性跳转
  });
});

核心注意点 #

• event.preventDefault()：这是阻止默认跳转的关键，调用它后浏览器不会自动提交表单到test.php。
• 避免重复绑定事件：一定要把代码放在$(document).ready()里，确保DOM加载完成后只绑定一次事件，否则可能出现多次验证、异常跳转的问题。

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