错误的内部 HTML 在错误的地方

error inner HTML on the wrong place

本文关键字：错误 HTML 内部      更新时间：2023-09-26

我对 3 个必填输入字段进行了表单验证：姓名、地址和城市。我做了这个JavaScript：

function Validate(form) {
    var error_name = "";
     var error_address = "";
      var error_city = "";
if (form.name.value.length == 0) {
            form.name.style.border = "1px solid red"; /*optioneel */
            form.name.style.backgroundColor = "#FFCCCC"; /* optioneel */
            error_name = "Name cannot be left blank!";
    }
     if (form.address.value.length == 0) {
                  form.address.style.border = "1px solid red"; /*optioneel */
                  form.address.style.backgroundColor = "#FFCCCC"; /* optioneel */
                  error_address = "Address cannot be left blank!";
    }
      if (form.city.value.length == 0) {
                  form.city.style.border = "1px solid red"; /*optioneel */
                  form.city.style.backgroundColor = "#FFCCCC"; /* optioneel */
                  error_city = "City cannot be left blank!";
    }
    if (error_name.length > 0) {
            document.getElementById("error_name").innerHTML = error_name ;
            return false;
    }
     if (error_address.length > 0) {
            document.getElementById("error_name").innerHTML = error_address ;
            return false;
    }
     if (error_city.length > 0) {
            document.getElementById("error_name").innerHTML = error_city ;
            return false;
    }
return true;
}
document.getElementById("aanmelden").onsubmit = function () {
return Validate(this);
};

这是形式的一部分：

<div id="form" >
<h3>Aanmelding WIES Congres</h3>
<p class="legend">Deelnemer</p>
<fieldset class="input2" id="Deelnemer">
<label>Naam:</label>
<div id="error_name"></div>
<input type="text" name="name" maxlength="25" size="25"> 
<label class="right">Bedrijf:</label>
<input class="right" type="text" name="company" maxlength="25" size="25">   
<br/>
<label>Adres:</label>
<div id="error_address"></div>
<input type="text" name="address" maxlength="25" size="25"> <br />
<label>Postcode:</label>
<input type="text" name="postalcode" maxlength="6" size="6"> <br />
<label class="right">Plaats:</label>
<div id="error_city"></div>
<input class="right" type="text" name="city" maxlength="25" size="25">
<label>Land</label>
<select name="country">
and so on----

正如您在表单中看到的，名称错误应该发生在名称字段上方，地址错误应该发生在地址字段上方，依此类推。但这并没有发生：所有错误都显示在名称字段上方，无论是名称、地址还是城市错误......我做错了什么？

看起来你所有的错误都针对同一个div ： #error_name .

尝试更改每个以定位相应的div：

document.getElementById("error_name").innerHTML = error_name;
document.getElementById("error_address").innerHTML = error_address;
document.getElementById("error_city").innerHTML = error_city;

此外，某些输入名称与其引用不匹配。例如：

form.name应为 form.form_name
form.address应为 form.form_address
form.city应为 form.form_city

为了一次显示所有错误（而不是每次表单提交一个错误），您需要删除所有return false;行并在函数末尾放置一个条件返回。此外，在用户更正空白输入后，您需要一种方法来"清除"错误。

这是重组后的函数：

function Validate(form) {
    // INITIALIZE VARIABLES
    var error_name = "";
    var error_address = "";
    var error_city = "";
    var valid = true;

    // CHECK FOR BLANK INPUTS, SET ERROR MESSAGES
    if (form.form_name.value.length == 0) {  
        error_name += "Name cannot be left blank!";
    }
    if (form.form_address.value.length == 0) {
        error_address += "Address cannot be left blank!";
    }
    if (form.form_city.value.length == 0) {
       error_city += "City cannot be left blank!";
    }

    // UPDATE ERROR MESSAGE DISPLAYS
    document.getElementById("error_name").innerHTML = error_name;
    document.getElementById("error_address").innerHTML = error_address;
    document.getElementById("error_city").innerHTML = error_city;

    // IF ERROR MESSAGE EXISTS, CHANGE STYLES AND SET VALID TO FALSE
    // ELSE IF NO ERRORS, RESET STYLES
    if (error_name.length > 0) {
        form.form_name.style.border = "1px solid red";
        form.form_name.style.backgroundColor = "#FFCCCC";
        valid = false;
    } else {
        form.form_name.style.border = "none";
        form.form_name.style.backgroundColor = "#FFFFFF";
    }
    if (error_address.length > 0) {
        form.form_address.style.border = "1px solid red";
        form.form_address.style.backgroundColor = "#FFCCCC";
        valid = false;
    } else {
        form.form_address.style.border = "none";
        form.form_address.style.backgroundColor = "#FFFFFF";
    }
    if (error_city.length > 0) {
        form.form_city.style.border = "1px solid red";
        form.form_city.style.backgroundColor = "#FFCCCC";
        valid = false;
    } else {
        form.form_city.style.border = "none";
        form.form_city.style.backgroundColor = "#FFFFFF";
    }

    // RETURN FORM VALIDITY (TRUE OR FALSE)
    // "FALSE" STOPS THE FORM FROM SUBMITTING
    return valid; 

}
// CONFIGURE ONSUBMIT FUNCTION
document.getElementById("aanmelden").onsubmit = function () {
  return Validate(this);
};

这是一个工作示例（jsfiddle）。

相关文章：