javascript - 使用 Javascript 进行表单验证：未设置错误标签

问题描述

我试图创建一个 html 表单。
我正在填写并使用 javascript 验证表单。我还为每个字段创建了一个错误标签。
为此，我创建了一个对象form_fields，其中包含字段名称、输入元素、错误元素和相应的验证函数。
每个字段的input_fieldanderror_field是在填写表单时设置的。
我的代码：

const form_fields = {
    name : { validate: validate_name },
    roll : { validate: validate_roll }
};

const form = document.getElementById("student_data");
function fill_form() {
    for(const [field, data] of Object.entries(form_fields)) {
        form.innerHTML += `
        <label for="${field}_field">Enter your ${field}: </label><br>
        <input type="text" id="${field}_field" name="${field}_field">
        <label style="color: red;" id="${field}_error_label">*</label><br>
        `;
        data.input_field = document.getElementById(field + "_field");
        data.error_field = document.getElementById(field + "_error_label");
        console.log(field, data.input_field, data.error_field);
    }
    form.innerHTML += '<button type="submit">Submit</button>';
}

function validate_name(name, error_field) {
    console.log(name);
    if(name == "") {
        error_field.innerHTML = "Name is required.";
        return true;
    }
}

function validate_roll(roll, error_field) {
    if(roll == "") {
        error_field.innerHTML = "Roll number is required.";
        return true;
    }
    else if(! new RegExp("^19HCS40[0-9]{2}$").test(roll)) {
        error_field.innerHTML = "Provided roll number is not correct.";
        return true;
    }
}

function validate() {
    let error_occurred = false;

    console.log(form_fields.roll.error_field);
    error_occurred = validate_roll('', form_fields.roll.error_field);
    console.log(error_occurred);

    return false;//!error_occurred;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Some Task</title>
</head>
<body onload="fill_form()">
    <form id="student_data" onsubmit="return validate()"></form>
    <!--<script src="validate.js"></script>-->
</body>
</html>

当我运行该行时error_occurred = validate_roll('', form_fields.roll.error_field);，我预计它会设置错误标签并返回true。
但是，由于某种原因，标签没有设置，即使validate_roll函数返回true.
更有趣的是控制台说错误已设置！

name <input type=&quot;text" id=&quot;name_field" name=&quot;name_field"> <label style=&quot;color: red;&quot; id=&quot;name_error_label">*&lt;/label> validate.js:15 
roll <input type=&quot;text" id=&quot;roll_field" name=&quot;roll_field"> <label style=&quot;color: red;&quot; id=&quot;roll_error_label">*&lt;/label> validate.js:43 
<label style=&quot;color: red;&quot; id=&quot;roll_error_label">Roll number is required.&lt;/label>                                     validate.js:45 
true

我在这里做错了什么？

标签： javascript

javascript - 使用 Javascript 进行表单验证：未设置错误标签

问题描述

解决方案

推荐阅读