0

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

正如您在表格中看到的，名称错误应该出现在名称字段上方，地址错误应该出现在地址字段上方等等..但这并没有发生：所有错误都显示在名称字段上方，无论是名称，地址或城市错误...我做错了什么？

4

1 回答 1

0

看起来您的所有错误都针对同一个 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）。

于 2013-11-06T19:41:44.833 回答