Question

我在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----

正如您在表单中看到的那样，名称错误应该出现在名称字段上方，地址字段上方的地址错误等等。但这不会发生：所有错误都显示在名称字段上方，而不是名称，地址或城市错误...... 我做错了什么？

Answer 1

看起来您的所有错误都定位于同一个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);
};

这是working example (jsfiddle)。

在错误的地方错误内部HTML

1 个答案: