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

【问题标题】：Form validation with Javascript: Error label not set使用 Javascript 进行表单验证：未设置错误标签
【发布时间】：2021-01-23 20:37:53
【问题描述】：

我正在尝试创建一个 html 表单。
我正在填写并使用 javascript 验证表单。我还为每个字段创建了一个错误标签。
为此，我创建了一个对象form_fields，其中包含字段名称、输入元素、错误元素和相应的验证函数。
每个字段的input_field 和error_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="text" id="name_field" name="name_field"> <label style="color: red;" id="name_error_label">*</label> validate.js:15 
roll <input type="text" id="roll_field" name="roll_field"> <label style="color: red;" id="roll_error_label">*</label> validate.js:43 
<label style="color: red;" id="roll_error_label">Roll number is required.</label>                                     validate.js:45 
true

我在这里做错了什么？

【问题讨论】：

标签： javascript

【解决方案1】：

问题来自于您构建表单的方式。当您执行form.innerHTML += … 时，您不添加代码，而是覆盖整个代码。因此，当您的表单完成时，form_fields 对象的input_field 和error_field 中存储的元素与表单最终代码中的元素不同。

解决此问题的一种方法是在创建表单后分配 input_field 和 error_field 属性（请参阅下面的 sn-p）。

另一种选择是删除input_field 和error_field 以及validate_* 函数的第二个参数，并通过相应函数中的id 获取元素。

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>
        `;
  }
  form.innerHTML += '<button type="submit">Submit</button>';
  
  for (const [field, data] of Object.entries(form_fields)) {
    data.input_field = document.getElementById(field + "_field");
    data.error_field = document.getElementById(field + "_error_label");
    console.log(field, data.input_field, data.error_field);
  }
}

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() {

    // this way all the validate_* function are executed  
  const error_occurred = [
      validate_roll('', form_fields.roll.error_field),
      validate_name('', form_fields.name.error_field)
  ].some(error => error);
  
  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>

【讨论】：

您好，谢谢您的回答。但是，即使我输入了有效输入，错误标签也会设置为 Name is required 和 Roll number is required.
您是否更改了validate_* 函数？到目前为止，您正在调用validate_roll('', form_fields.roll.error_field),，这意味着输入中的任何内容您始终使用''（一个空字符串）调用该函数，因此会出现错误消息。试试validate_roll(form_fields.roll.input_field.value, form_fields.roll.error_field)，当然validate_name也一样