JS验证表单提交后无法跳转至目标页面问题求助

我帮你排查出两个核心问题导致验证通过后不跳转：

1. 你的提交按钮是<input type="button">，这种按钮不会触发表单的默认提交行为，只会执行你绑定的验证逻辑
2. 你的processEntries函数在所有字段验证通过后，没有添加任何跳转或提交表单的代码，所以验证完成后就没有后续动作了

下面给你两种可行的修复方案，选一种就行：

方案一：保持按钮类型为button，验证通过后手动跳转 #

修改你的JavaScript代码，在processEntries函数的最后添加验证通过后的处理逻辑：

var processEntries = function(){
    var isValid = true;
    // --- 原有所有验证代码保持不变 ---
    
    // 新增：验证通过后跳转到目标页面
    if (isValid) {
        window.location.href = "form_complete.html";
    }
}

方案二：将按钮改为submit类型，利用表单原生提交行为 #

这种方式更符合表单的原生交互逻辑，步骤如下：

第一步：修改HTML里的提交按钮 #

把原来的按钮从type="button"改成type="submit"：

<input type="submit" id="registerbtn" value="Submit">

第二步：修改JavaScript的验证函数，阻止无效时的默认提交 #

更新processEntries函数，添加事件参数并在验证不通过时阻止表单提交：

var processEntries = function(event){
    var isValid = true;
    // --- 原有所有验证代码保持不变 ---
    
    // 如果验证不通过，阻止表单默认提交行为
    if (!isValid) {
        event.preventDefault();
    }
}

补充说明 #

• 如果你选择方案二，表单的action="form_complete.html"会生效，但要注意：如果form_complete.html是静态页面，用method="get"会更合适（保持post也能跳转，只是URL会携带表单参数）
• 两种方案都能实现验证通过后跳转的效果，根据你的需求选择即可

下面是完整的修改后代码示例（以方案一为例）：

修改后的HTML代码

<form id="contactform" action="form_complete.html" method="post"> 
    <p class = "labelp"> 
        <label for="name">Name: </label> 
        <input type="text" name="name" id="name" placeholder="Enter your name" > 
        <span>*</span><br><br> 
    </p> 
    <p class = "labelp"> 
        <label for="age">Age: </label> 
        <input type="text" min="18" max="100" name="age" id="age" placeholder="Enter your age"> 
        <!-- using type=text so I can practice isNaN in js --> 
        <span>*</span><br><br> 
    </p> 
    <p class = "labelp">
        <label for="country">Country: </label> 
        <select name="country" id="country"> 
            <option value ="" >Select a country</option> 
            <option>USA</option> 
            <option>Canada</option> 
            <option>Mexico</option> 
            <option>Brazil</option> 
            <option>Japan</option> 
            <option>China</option> 
            <option>Other</option> 
        </select> 
        <span>*</span><br><br> 
    </p> 
    <p class = "labelp"> 
        <label for="email">E-mail: </label> 
        <input type="email" name="email" id="email" placeholder="Enter your E-mail"> 
        <span>*</span><br><br> 
    </p> 
    <p class = "labelp"> 
        <label for="bday">Birthday: </label> 
        <input type="date" name="bday" id="bday"> 
        <span>*</span><br><br> 
    </p> 
    <p class = "labelp"> 
        <label for="gender" id="gender">Gender: </label> 
        <input type="radio" name="gender" value="male" id="male"> Male 
        <input type="radio" name="gender" value="female" id="female"> Female 
        <input type="radio" name="gender" value="other" id="other"> Other 
        <br><br> 
    </p> 
    <label>Comments: </label> 
    <textarea rows="5" cols="30"> </textarea><br><br> 
    <input type="button" id="registerbtn" value="Submit"> 
    <input type="button" id="resetbtn" value="Reset"> 
</form>

修改后的JavaScript代码

"use strict"; 
var $ = function(id) { return document.getElementById(id);}; 

var processEntries = function(){ 
    var isValid = true; 

    // values 
    var name = $("name").value; 
    var age = $("age").value; 
    var country = $("country").value; 
    var email = $("email").value; 
    var bday = $("bday").value; 
    var gender = ""; 
    if ($("male").checked){gender = "Male";} 
    if ($("female").checked){gender = "Female";} 
    if ($("other").checked){gender = "Other";} 
    console.log(gender); //check if gender buttons work 

    // name 
    if(name == ""){ 
        $("name").nextElementSibling.firstChild.nodeValue = "This field is required!"; 
        isValid = false;
    } else{ 
        $("name").nextElementSibling.firstChild.nodeValue = ""; 
    } 

    // age 
    if(age == ""){ 
        $("age").nextElementSibling.firstChild.nodeValue = "This field is required!"; 
        isValid = false; 
    } else if(isNaN(age)){ 
        $("age").nextElementSibling.firstChild.nodeValue = "This field must be a number!"; 
        isValid = false; 
    } else{ 
        $("age").nextElementSibling.firstChild.nodeValue = ""; 
    } 

    //country 
    if(country == ""){ 
        $("country").nextElementSibling.firstChild.nodeValue = "Please select a country!"; 
        isValid = false;
    } else{ 
        $("country").nextElementSibling.firstChild.nodeValue = ""; 
    } 

    //email 
    if(email == ""){ 
        $("email").nextElementSibling.firstChild.nodeValue = "This field is required!"; 
        isValid = false;
    } else{ 
        $("email").nextElementSibling.firstChild.nodeValue = ""; 
    } 

    //birthday 
    if(bday == ""){ 
        $("bday").nextElementSibling.firstChild.nodeValue = "This field is required!"; 
        isValid = false;
    } else{ 
        $("bday").nextElementSibling.firstChild.nodeValue = ""; 
    } 

    // 新增：验证通过后跳转页面
    if (isValid) {
        window.location.href = "form_complete.html";
    }
} 

var resetForm = function(){ 
    $("contactform").reset(); 
    $("name").nextElementSibling.firstChild.nodeValue = "*"; 
    $("age").nextElementSibling.firstChild.nodeValue = "*"; 
    $("country").nextElementSibling.firstChild.nodeValue = "*"; 
    $("email").nextElementSibling.firstChild.nodeValue = "*"; 
    $("bday").nextElementSibling.firstChild.nodeValue = "*"; 
} 

window.onload = function() { 
    $("registerbtn").onclick = processEntries; 
    $("resetbtn").onclick = resetForm; 
    $("name").focus(); 
}

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