表单指定action地址后跳过前端验证的问题求助

我仔细看了你的代码，发现问题根源是HTML语法错误，这个错误破坏了表单的DOM结构，导致onsubmit绑定的验证逻辑没有被正确执行——尤其是当你指定action地址后，浏览器的表单提交流程被异常结构干扰，直接跳过了验证步骤。

问题代码里的错误点 #

你写的重置按钮部分多了一个多余的闭合标签：

<input type="reset" value="Reset"></button>

<input>是自闭合标签，根本不需要</button>来收尾，这个多余的标签会让浏览器解析表单结构时出现异常，进而阻断onsubmit事件的触发。

修复后的完整代码 #

<html>
<head>
    <title>Online Food Delivery Form</title>
    <h1>Online Food Delivery Form</h1>
</head>
<body>
    <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="get" onsubmit="return validation();">
        Name* : <input type="text" name="name" id="name">
        <br /> <br />
        Email* : <input type="email" name="email" id="email">
        <br /> <br />
        Postcode* : <input type="text" name="postcode" id="postcode" size="10">
        <input type="reset" value="Reset">
        <input type="submit" name="submit" value="Submit"/>
    </form>
    <div id="eresult" style="color:red;"></div>
    <script type="text/javascript">
        function validation(){
            var name = document.getElementById('name').value.trim(); // 过滤输入空格
            var email = document.getElementById('email').value.trim();
            var postcode = document.getElementById('postcode').value.trim();
            var errorElement = document.getElementById("eresult");
            
            if(name=='' || postcode=='' || email==''){
                errorElement.innerHTML = "Name, Email and Postcode are required.";
                return false;
            } else if(name.length<3){
                errorElement.innerHTML = "Name must be more than 3 characters.";
                return false;
            } else if(postcode.length<4){
                errorElement.innerHTML = "Postcode must be atleast 4 characters.";
                return false;
            } else {
                errorElement.innerHTML = ""; // 验证通过清空错误提示
                return true;
            }
        }
    </script>
</body>
</html>

额外的优化小建议 #

• 给输入值加上.trim()，可以过滤用户不小心输入的空格，避免只输空格就通过验证的情况
• 验证通过后清空错误提示，能提升用户体验
• 你也可以试试更现代的事件处理方式，比如用event.preventDefault()控制提交：
  修改表单的onsubmit为onsubmit="validation(event);"，然后调整函数逻辑：

  function validation(event){
      // 验证逻辑...
      if(验证不通过){
          event.preventDefault();
          // 显示错误信息
      } else {
          // 表单正常提交
      }
  }
  

  这种方式逻辑更清晰，也更符合现代前端的写法。

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