HTML表单JS验证问题：提交时alert未触发求排查解决

关于浏览器调试的source map错误 #

这个错误是Chrome扩展（对应ID为nllcnknpjnininklegdoijpljgdjkijc的扩展）的source map加载失败导致的，和你的代码完全无关，可以直接忽略，或者通过禁用该扩展消除这个提示。

核心代码错误（导致提交时alert不弹出） #

你的JavaScript代码存在两个关键错误：

1. 表单提交事件名拼写错误 #

原代码中事件绑定写为：

form.onsubimit = function (event){...}

正确的事件名称是onsubmit（少写了字母m），事件绑定失效导致提交表单时不会触发验证函数。

2. 性别选择的判断值拼写错误 #

原代码中判断性别选择的条件是：

lgenre.value == "selecione"

但你的HTML里默认选项的value属性值是"select"，并非"selecione"，导致该判断永远不成立。

修复后的完整JavaScript代码 #

// 选择需要操作的元素
let form = document.getElementById("formulario");
let fname = document.getElementById("fname");
let lname = document.getElementById("lname");
let lgenre = document.getElementById("lgenre");
let fname_msg = document.getElementById("msg-vld-fname");
let lname_msg = document.getElementById("msg-vld-lname");
let lgenre_msg = document.getElementById("msg-vld-lgenre");

// 失去焦点时验证名字
fname.onblur = function (event) {
    if (event.target.value.length < 3) {
        fname_msg.textContent = "Insert at least 3 characters";
        fname_msg.style.display = 'block';
    } else {
        fname_msg.style.display = 'none';
    }
}

// 改变选项时验证性别
lgenre.onchange = function (event) {
    if (event.target.value == "select") {
        lgenre_msg.textContent = "Select a valid attribute.";
        lgenre_msg.style.display = 'block';
    } else {
        lgenre_msg.style.display = 'none';
    }
}

// 获取焦点时隐藏名字错误提示
fname.onfocus = function () {
    fname_msg.style.display = 'none';
}

// 提交表单时验证
form.onsubmit = function (event){
    let hasError = false;
    // 重新验证名字，确保提交时的状态正确
    if (fname.value.length < 3) {
        fname_msg.textContent = "Insert at least 3 characters";
        fname_msg.style.display = 'block';
        hasError = true;
    }
    // 验证性别选择
    if (lgenre.value == "select") {
        lgenre_msg.textContent = "Select a valid attribute.";
        lgenre_msg.style.display = 'block';
        hasError = true;
    }
    // 存在错误时弹出提示并阻止提交
    if (hasError) {
        alert("please, complete this form correctly before submission");
        event.preventDefault();
    }
}

额外优化建议 #

• 可以给lname字段添加类似的验证逻辑，保证表单验证的完整性
• 修正错误提示里的英文拼写：carachters改为characters，valida atribute改为valid attribute，after submition改为before submission

内容的提问来源于stack exchange，提问作者Bruno de Souza