JavaScript required fields validation 无法正确校验44个字段

明确结论

代码里至少有两处变量或运算符写错了：

1. 第 11 个字段判断空字符串时，误用了 x12。
2. 第 27 个字段使用了赋值运算符 =，而不是比较运算符。

另外，onsubmit="return validateit()" 依赖 validateit() 返回布尔值。如果函数末尾没有返回结果，就无法可靠地阻止表单提交。现有代码还只能识别”恰好四个空格”，建议改用 trim() 统一判断空白字符。

两处直接错误

x11 错误引用了 x12

原代码：

if (x11 == null || x12 == "" || x11 == "    ") {

第二个条件检查的也应该是 x11：

if (x11 == null || x11 == "" || x11 == "    ") {

否则，当 x11 是空字符串而 x12 有值时，程序可能不会报告 x11 的必填错误。

x27 把比较写成了赋值

原代码：

if (x27 = null || x27 == "" || x27 == "    ") {

单个等号会把 null 赋给 x27。应改为：

if (x27 == null || x27 == "" || x27 == "    ") {

也可以使用严格比较：

if (x27 === null || x27 === "" || x27 === "    ") {

不过，表单控件的 value 通常是字符串。只要控件存在，一般不需要单独判断 null。

必须返回验证结果

表单使用了：

onsubmit = "return validateit()"

所以 validateit() 最后必须返回 true 或 false：

return count === 0;

完整结构应类似：

function validateit() {
    var count = 0;

    // 各字段校验……

    return count === 0;
}

存在错误时返回 false，浏览器会取消提交；所有字段都有效时返回 true。

如果函数末尾没有 return，返回值就是 undefined，无法在内联 onsubmit 中明确、可靠地表达验证结果。

不要只判断四个空格

下面的条件只能识别空字符串和恰好四个空格：

x1 == "" || x1 == "    "

一个空格、三个空格、制表符和换行符都无法通过这种方式识别。可以改用 trim()：

if (x1.trim() === "") {
    // 字段为空，或者只包含空白字符
}

如果还要兼容值不存在的情况，可以封装一个函数：

function isBlank(value) {
    return value == null || String(value).trim() === "";
}

然后统一校验：

if (isBlank(x1)) {
    document.getElementById("demo1").textContent =
        "Error: Company number is required";
    count++;
} else {
    document.getElementById("demo1").textContent = "";
}

清除消息时，赋值空字符串比赋值 null 更直观：

element.textContent = "";

错误文本不包含 HTML，也不需要使用 innerHTML。

最小修改版本

如果暂时保留现有结构，至少要修正以下位置：

function validateit() {
    var x11 = document.forms["myForm"]["PARTIAL_PAYMENT_REFUND"].value;
    var x12 = document.forms["myForm"]["RETURN_PREMIUM_REFUND"].value;
    var x27 = document.forms["myForm"]["MULTI_PAY_IND"].value;

    var count = 0;

    if (x11.trim() === "") {
        document.getElementById("demo11").textContent =
            "Error: Partial payment refund is required";
        count++;
    } else {
        document.getElementById("demo11").textContent = "";
    }

    if (x12.trim() === "") {
        document.getElementById("demo12").textContent =
            "Error: Return premium refund is required";
        count++;
    } else {
        document.getElementById("demo12").textContent = "";
    }

    if (x27.trim() === "") {
        document.getElementById("demo27").textContent =
            "Error: Multipay ind is required";
        count++;
    } else {
        document.getElementById("demo27").textContent = "";
    }

    // 其余字段校验……

    return count === 0;
}

更适合 44 个字段的写法

手写 44 段几乎相同的代码，很容易混用 x11 和 x12，也可能漏改编号。可以用配置数组集中维护字段名、错误元素和提示信息：

function validateit() {
    const form = document.forms["myForm"];

    if (!form) {
        console.error('Form "myForm" was not found.');
        return false;
    }

    const requiredFields = [
        {
            name: "COMPANY1",
            errorId: "demo1",
            message: "Error: Company number is required"
        },
        {
            name: "STATE1",
            errorId: "demo2",
            message: "Error: State code is required"
        },
        {
            name: "BILL_CODE1",
            errorId: "demo3",
            message: "Error: Bill code is required"
        },
        {
            name: "PARTIAL_PAYMENT_REFUND",
            errorId: "demo11",
            message: "Error: Partial payment refund is required"
        },
        {
            name: "RETURN_PREMIUM_REFUND",
            errorId: "demo12",
            message: "Error: Return premium refund is required"
        },
        {
            name: "MULTI_PAY_IND",
            errorId: "demo27",
            message: "Error: Multipay ind is required"
        }
        // 按相同格式加入其余字段
    ];

    let valid = true;

    for (const field of requiredFields) {
        const control = form.elements[field.name];
        const errorElement = document.getElementById(field.errorId);

        if (!control) {
            console.error(`Form control "${field.name}" was not found.`);
            valid = false;
            continue;
        }

        if (!errorElement) {
            console.error(`Error element "${field.errorId}" was not found.`);
            valid = false;
            continue;
        }

        const isEmpty = String(control.value ?? "").trim() === "";

        errorElement.textContent = isEmpty ? field.message : "";

        if (isEmpty) {
            valid = false;
        }
    }

    return valid;
}

这样可以把重复逻辑放进一个循环。字段名写错时，控制台也会给出明确提示。

还需要检查的几个问题

表单控件的 name 必须匹配

代码通过 name 查找控件：

form.elements["COMPANY1"]

因此，生成的 HTML 必须包含：

<input name="COMPANY1">

只有 id="COMPANY1"，却没有对应的 name，仍然无法通过这段代码找到控件。ASP.NET MVC 使用嵌套模型时，生成的名称还可能是：

<input name="Table1.COMPANY1">

这时 JavaScript 也必须使用最终生成的 name。检查时应以浏览器开发者工具中的 HTML 为准，不能只看 Razor 模板。

错误提示元素必须存在

如果页面缺少：

<span id="demo11"></span>

那么 getElementById() 会返回 null，下面的赋值会抛出异常，后续字段也不会继续验证：

document.getElementById("demo11").textContent = "...";

浏览器控制台通常会出现类似 “Cannot set properties of null” 的错误。

单选框和复选框不能一律依赖 value

如果某些字段是 checkbox 或一组 radio，必填通常表示”至少选中一项”，而不是检查元素有没有 value。例如：

const checked = form.querySelector(
    'input[name="EFT_AUTH_CHECK"]:checked'
);

if (!checked) {
    // 没有选中任何选项
}

checkbox 即使没有勾选，value 也可能仍是 "on"。因此，只判断 value.trim() 会得到错误结果。

注意事项

JavaScript 校验可以改善填写体验，但不能替代服务端校验。用户可以禁用 JavaScript、修改请求，或者直接调用接口。即使前端已经检查了 44 个字段，C# 服务端仍要验证必填项、格式和业务规则。

现阶段应先修正 x11 的变量引用和 x27 的赋值运算符，并确认函数末尾包含：

return count === 0;

之后再用 trim() 和配置数组减少重复代码，从而降低再次出现同类拼写错误的概率。

备注：内容仅供参考。