如何在JavaScript的validateLengths验证通过后提交表单？

你目前的问题是：想在validateLengths()验证通过后真正提交表单，但现在只能弹出提示；而且不设置action="javascript:void(0)"的话，表单会直接跳过验证提交。下面给你两种简单实用的解决思路：

方法一：直接调用表单的submit()方法 #

在验证通过的代码块里，获取表单DOM元素并调用它的原生submit()方法，同时把表单的action改成你实际要提交的地址（比如后端接口路径），无需再用javascript:void(0)。

修改后的代码 #

JavaScript部分

function validateLengths() {
    let fnameCap = document.getElementById("firstName").value;
    let lnameCap = document.getElementById("lastName").value;
    
    if (fnameCap.length < 4 ) {
        alert("First name must be at least 4 characters.");
        return false;
    }
    if (lnameCap.length < 6) {
        alert("Last name must be at least 6 characters.");
        return false;
    }
    // 验证通过，提交表单
    document.getElementById("theForm").submit();
}
function capitalize(){
    let first = document.getElementById("firstName");
    let last = document.getElementById("lastName");
    first.value = first.value.toUpperCase();
    last.value = last.value.toUpperCase();
    // 返回验证结果，用于阻止表单默认提交
    return validateLengths();
}

HTML部分

<!-- 把action改成你实际的提交地址，比如"/submit-data" -->
<form action="/your-submit-url" id="theForm" title="form1">
    <input name="firstName" type="text" id="firstName" placeholder="At least 4 chars">
    <br>
    <input name="lastName" type="text" id="lastName" placeholder="At least 6 chars">
    <br>
    <!-- 这里必须return capitalize()，验证不通过时才能阻止默认提交 -->
    <input type="submit" name="submit" id="submit" value="Submit" onClick="return capitalize()">
</form>

方法二：绑定表单onsubmit事件（更规范的写法） #

推荐这种方式，把验证+提交逻辑绑定到表单的onsubmit事件上，避免内联事件的耦合，代码结构更清晰。

修改后的代码 #

JavaScript部分

function validateAndSubmit(event) {
    // 先阻止表单的默认提交行为
    event.preventDefault();
    
    // 转换输入为大写
    let first = document.getElementById("firstName");
    let last = document.getElementById("lastName");
    first.value = first.value.toUpperCase();
    last.value = last.value.toUpperCase();
    
    // 执行长度验证
    let fnameCap = first.value;
    let lnameCap = last.value;
    
    if (fnameCap.length < 4 ) {
        alert("First name must be at least 4 characters.");
        return;
    }
    if (lnameCap.length < 6) {
        alert("Last name must be at least 6 characters.");
        return;
    }
    // 验证通过，手动提交表单
    document.getElementById("theForm").submit();
}

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("theForm").addEventListener('submit', validateAndSubmit);
});

HTML部分

<form action="/your-submit-url" id="theForm" title="form1">
    <input name="firstName" type="text" id="firstName" placeholder="At least 4 chars">
    <br>
    <input name="lastName" type="text" id="lastName" placeholder="At least 6 chars">
    <br>
    <!-- 无需写onClick，直接依赖表单的submit事件 -->
    <input type="submit" name="submit" id="submit" value="Submit">
</form>

关键注意点 #

• 第一种方法里，按钮的onClick="return capitalize()"是核心：当validateLengths()返回false时，capitalize()也会返回false，从而阻止表单的默认提交行为。
• 第二种方法用event.preventDefault()先拦截默认提交，验证通过后再手动触发提交，这是现代前端更推荐的事件处理方式。
• 一定要把表单的action改成你实际要提交的后端地址，不要一直保留javascript:void(0)。

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