表单点击提交按钮直接跳转未显示错误的问题求助

我制作了index.html表单，使用JavaScript实现表单验证功能，预期点击提交按钮时，若输入数据正确则跳转至detail.html页面；若输入错误数据，则阻止跳转并显示错误提示信息，但实际两种情况都未实现——错误信息不显示，且直接跳转至detail.html页面。

原HTML代码 #

<form action="/detail" method="POST" role="form" name="index" onsubmit="return validateForm()" enctype="application/x-www-form-urlencoded">
    <label for="name">Name</label>
    <input type="text" name="name" placeholder="Enter your name" required/>
    <span class="formerror"></span>
    <br />
    <label for="phone_number">Mobile:</label>
    <input type="number" name="phone_number" placeholder="enter your mobile number" required >
    <span class="formerror"></span>
    <br/>
    <label for="password">Password:</label>
    <input type="password" name="password" placeholder="enter your password" required  />
    <span class="formerror"></span>
    <br />
    <button id="btnsubmit" class="btn" onclick="submit">Submit</button>
</form>

原表单验证JavaScript代码 #

function clearErrors(){
    errors=document.getElementsByClassname('formerror');
    for(let item of errors){
        item.innerHTML="";
    }
}
function seterror(id,error){
    //sets error inside tag of id
    element=document.getElementById(id);
    element.getElementsByClassName('formerror')[0].innerHTML=error;
}
function validateForm(){
    var returnval = true;
    //performs validation and if validation fails, set the value of returnval to false.
    var name = document.forms['index']["name"].value;
    if(name.length<3)
    {
        seterror("name","length of name of too short");
        returnval=false;
    }
    var phone_number = document.forms['index']["phone_number"].value;
    if(phone_number.length!=10)
    {
        seterror("phone_number","phone number should be of 10 digits");
        returnval=false;
    }
    var password = document.forms['index']["password"].value;
    if(password.length<4)
    {
        seterror("password","password should be at least of 4 characters");
        returnval=false;
    }
    return returnval;
}

问题排查与修复方案 #

1. 提交按钮的onclick属性干扰验证逻辑 #

按钮的onclick="submit"会直接触发表单提交，绕过onsubmit绑定的validateForm()验证。移除该属性，让表单的onsubmit事件处理验证：

<button id="btnsubmit" class="btn">Submit</button>

2. JavaScript拼写错误导致函数失效 #

document.getElementsByClassname存在拼写错误，正确写法是document.getElementsByClassName（注意ClassName的大写C），这个错误会导致clearErrors函数无法清空错误提示。

3. 输入框缺失id属性，无法定位元素 #

原HTML中输入框只有name属性，没有id，导致seterror函数里document.getElementById(id)返回null，无法找到对应的错误提示元素。给每个输入框添加id（与name值一致）：

<input type="text" id="name" name="name" placeholder="Enter your name" required/>
<input type="number" id="phone_number" name="phone_number" placeholder="enter your mobile number" required >
<input type="password" id="password" name="password" placeholder="enter your password" required  />

4. 错误提示元素的定位逻辑错误 #

原seterror函数错误地认为.formerror是输入框的子元素，但实际两者是同级关系。修改函数逻辑，通过输入框的nextElementSibling获取同级的错误提示span：

function seterror(id, error) {
    const inputElement = document.getElementById(id);
    const errorElement = inputElement.nextElementSibling;
    errorElement.innerHTML = error;
}

5. 验证前未清空历史错误提示 #

在validateForm函数开头调用clearErrors()，避免上次的错误提示残留：

function validateForm(){
    clearErrors(); // 添加此行
    var returnval = true;
    // 后续验证逻辑...
}

6. 手机号验证的兼容性问题 #

type="number"的输入框获取的value可能存在格式问题，建议改为type="tel"，或者在验证前处理输入内容，确保是纯数字：

var phone_number = document.forms['index']["phone_number"].value.toString().replace(/\D/g, '');
if(phone_number.length !== 10) {
    seterror("phone_number","手机号必须是10位数字");
    returnval=false;
}

修复后的完整代码 #

HTML部分 #

<form action="/detail" method="POST" role="form" name="index" onsubmit="return validateForm()" enctype="application/x-www-form-urlencoded">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required/>
    <span class="formerror"></span>
    <br />
    <label for="phone_number">Mobile:</label>
    <input type="tel" id="phone_number" name="phone_number" placeholder="enter your mobile number" required >
    <span class="formerror"></span>
    <br/>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" placeholder="enter your password" required  />
    <span class="formerror"></span>
    <br />
    <button id="btnsubmit" class="btn">Submit</button>
</form>

JavaScript部分 #

function clearErrors(){
    const errors = document.getElementsByClassName('formerror');
    for(let item of errors){
        item.innerHTML = "";
    }
}

function seterror(id, error) {
    const inputElement = document.getElementById(id);
    const errorElement = inputElement.nextElementSibling;
    errorElement.innerHTML = error;
}

function validateForm(){
    clearErrors();
    let returnval = true;

    const name = document.forms['index']["name"].value;
    if(name.length < 3) {
        seterror("name","姓名长度不能少于3位");
        returnval = false;
    }

    const phone_number = document.forms['index']["phone_number"].value.toString().replace(/\D/g, '');
    if(phone_number.length !== 10) {
        seterror("phone_number","手机号必须是10位数字");
        returnval = false;
    }

    const password = document.forms['index']["password"].value;
    if(password.length < 4) {
        seterror("password","密码长度不能少于4位");
        returnval = false;
    }

    return returnval;
}

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