NextJS客户端表单验证函数始终返回true，预期应返回false

你的表单验证函数始终返回true，核心问题出在这几个地方：

1. 未处理undefined的情况
   初始state是空对象{}，所有未填写的字段值都是undefined，但你的判断只检查了null和特定字符串，导致不符合条件的情况没被捕获。比如第一个判断里，jobSubmission.jobCategory初始是undefined，既不等于"Please-Select"，也不是null，所以直接跳过这个判断。

2. 字段名拼写错误
   第二个判断里的salarRange是笔误，应该是salaryRange（假设你的输入框name属性是这个）。键名不匹配会导致永远拿不到对应的值，判断条件自然不会触发。

修改后的验证函数 #

把这些问题修正后，验证逻辑就能正常工作了：

function validateForm (){
    console.log("Validation running")

    // 检查职位分类：覆盖未选择（undefined）、默认选项的情况
    if(!jobSubmission.jobCategory || jobSubmission.jobCategory === "Please-Select"){
        alert("Please make job category selection")
        return false
    }

    // 修正拼写错误，并检查薪资范围已填写但支付周期未选的情况
    if (jobSubmission.salaryRange && jobSubmission.salaryRange.trim() !== "" && !jobSubmission.timeOfPayment){
        alert("Please select frequency of salary payment or remove salary range");
        return false
    }

    return true
}

额外优化建议 #

给state设置明确的初始值，让验证逻辑更稳定：

const [jobSubmission, setJobSubmission] = useState({
    jobCategory: "Please-Select",
    salaryRange: "",
    timeOfPayment: undefined
});

这样表单加载时的初始状态更清晰，也能避免因undefined导致的判断遗漏。

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