当出现错误但错误仍然存在于同一行时，我的表单顶部会弹出一条错误消息。如何让它们相互之间或网页上的正确位置？我在html上有以下代码，目前显示我的错误信息。如果需要，我也可以显示我的HTML。
<p id="error"></p>
JavaScript：
"use strict";
/*get variables from form and check rules*/
function validate(){
var errMsg = ""; /* stores the error message */
var result = true; /* assumes no errors */
var firstName = document.getElementById("firstName").value;
var familyName = document.getElementById("familyName").value;
var midName = document.getElementById("midName").value;
var male = document.getElementById("male").checked;
var female = document.getElementById("female").checked;
var street = document.getElementById("street").value;
var suburb = document.getElementById("suburb").value;
var state = document.getElementById("state").options[document.getElementById("state").selectedIndex].text;
var postcode = document.getElementById("postcode").value;
var email = document.getElementById("email").value;
var number = document.getElementById("number").value;
var XML = document.getElementById("XML").checked;
var Java = document.getElementById("Java").checked;
var Python = document.getElementById("Python").checked;
var SQL = document.getElementById("SQL").checked;
var PERL = document.getElementById("PERL").checked;
var MySQL = document.getElementById("MySQL").checked;
var Windows = document.getElementById("Windows").checked;
var UNIX = document.getElementById("UNIX").checked;
var Linux = document.getElementById("Linux").checked;
var other = document.getElementById("other").checked;
var otherText = document.getElementById("otherText").value;
var dob = document.getElementById("dob").value.split("/");
var date = new Date(dob[2], parseInt(dob[1]) - 1, dob[0]);
var today = new Date();
var age = today.getFullYear() - date.getFullYear();
//get varibles from form and check rules here
// if something is wrong set result = false, and concatenate error message
//Validation for Date of birth
if (age >= 80){ // Checks if age is over 80
errMsg = errMsg + "You must be 80 or younger to apply for this job\n";
result = false;
}
if (age <= 15){ // Checks if age is under 15
errMsg = errMsg + "You must be 15 or older to apply for this job\n";
result = false;
}
//Validation for state and corresponding postcode
if (!(postcode.charAt(0) == 3 || postcode.charAt(0) == 8) && state == "VIC") {
errMsg = errMsg + "Your state and postcode do not match. State VIC postcodes must start with a 3 or 8\n";
result = false;
} else if (!(postcode.charAt(0) == 1 || postcode.charAt(0) == 2) && state == "NSW") {
errMsg = errMsg + "Your state and postcode do not match. State NSW postcodes must start with a 1 or 2\n";
result = false;
} else if (!(postcode.charAt(0) == 4 || postcode.charAt(0) == 9) && state == "QLD") {
errMsg = errMsg + "Your state and postcode do not match. State QLD postcodes must start with a 4 or 9\n";
result = false;
} else if (!(postcode.charAt(0) == 0) && state == "NT") {
errMsg = errMsg + "Your state and postcode do not match. State NT postcodes must start with a 0\n";
result = false;
} else if (!(postcode.charAt(0) == 6) && state == "WA") {
errMsg = errMsg + "Your state and postcode do not match. State WA postcodes must start with a 6\n";
result = false;
} else if (!(postcode.charAt(0) == 5) && state == "SA") {
errMsg = errMsg + "Your state and postcode do not match. State SA postcodes must start with a 5\n";
result = false;
} else if (!(postcode.charAt(0) == 7) && state == "TAS") {
errMsg = errMsg + "Your state and postcode do not match. State TAS postcodes must start with a 7\n";
result = false;
} else if (!(postcode.charAt(0) == 0) && state == "ACT") {
errMsg = errMsg + "Your state and postcode do not match. State ACT postcodes must start with a 0\n";
result = false;
} else {
result = true;
}
//Validation of other skill so checks if other skill box is checked and if so will check textbox for text
if (other && document.getElementById("otherText").value.trim().length===0) {
errMsg = errMsg + "You have selected other skills, you must enter one other skill in the text box\n";
result = false;
}
if (errMsg != "") { //only display message box if there is something to show
document.getElementById("error").innerHTML = errMsg;
}
if (result == true) {
storeForm(firstName, familyName, midName, dob, male, female, street, suburb, state, postcode, email, number, XML, Java, Python, SQL, PERL, MySQL, Windows, UNIX, Linux, other, otherText)
}
return result; //if false the information will not be sent to the server
}
答案 0 :(得分：0)
@evan
var err = [];
....
....
...
err.push('You have selected other skills, you must enter one other skill in the text box');
....
....
err.push('Your state and postcode do not match. State QLD postcodes
must start with a 4 or 9');
...
// NEW CODE
var ul = document.createElement('ul');
for(var i=0; i< err.length; i++){
var li = document.createElement('li');
li.innerHtml = err[i];
ul.appendChild(li);
}
....
...
var pError = document.getElementById("error");
pError.innerHtml = ul;
我已经把这段代码写到了编辑器这里。但我相信我明确了我的观点。如有任何疑问，请在下面发表评论。
答案 1 :(得分：0)
我认为更好的代码架构如下所示，因为它可以让您更好地控制与现有设计保持同步。
<ul id="error"></ul>
JavaScript的：
"use strict";
/*get variables from form and check rules*/
function validate(){
var errMsgs = []; /* change error message to array */
var result = true; /* assumes no errors */
var firstName = document.getElementById("firstName").value;
var familyName = document.getElementById("familyName").value;
var midName = document.getElementById("midName").value;
var male = document.getElementById("male").checked;
var female = document.getElementById("female").checked;
var street = document.getElementById("street").value;
var suburb = document.getElementById("suburb").value;
var state = document.getElementById("state").options[document.getElementById("state").selectedIndex].text;
var postcode = document.getElementById("postcode").value;
var email = document.getElementById("email").value;
var number = document.getElementById("number").value;
var XML = document.getElementById("XML").checked;
var Java = document.getElementById("Java").checked;
var Python = document.getElementById("Python").checked;
var SQL = document.getElementById("SQL").checked;
var PERL = document.getElementById("PERL").checked;
var MySQL = document.getElementById("MySQL").checked;
var Windows = document.getElementById("Windows").checked;
var UNIX = document.getElementById("UNIX").checked;
var Linux = document.getElementById("Linux").checked;
var other = document.getElementById("other").checked;
var otherText = document.getElementById("otherText").value;
var dob = document.getElementById("dob").value.split("/");
var date = new Date(dob[2], parseInt(dob[1]) - 1, dob[0]);
var today = new Date();
var age = today.getFullYear() - date.getFullYear();
//get varibles from form and check rules here
// if something is wrong set result = false, and concatenate error message
//Validation for Date of birth
if (age >= 80){ // Checks if age is over 80
errMsgs.push("You must be 80 or younger to apply for this job");
result = false;
}
if (age <= 15){ // Checks if age is under 15
errMsgs.push("You must be 15 or older to apply for this job");
result = false;
}
//Validation for state and corresponding postcode
if (!(postcode.charAt(0) == 3 || postcode.charAt(0) == 8) && state == "VIC") {
errMsgs.push("Your state and postcode do not match. State VIC postcodes must start with a 3 or 8");
result = false;
} else if (!(postcode.charAt(0) == 1 || postcode.charAt(0) == 2) && state == "NSW") {
errMsgs.push("Your state and postcode do not match. State NSW postcodes must start with a 1 or 2");
result = false;
} else if (!(postcode.charAt(0) == 4 || postcode.charAt(0) == 9) && state == "QLD") {
errMsgs.push("Your state and postcode do not match. State QLD postcodes must start with a 4 or 9");
result = false;
} else if (!(postcode.charAt(0) == 0) && state == "NT") {
errMsgs.push("Your state and postcode do not match. State NT postcodes must start with a 0");
result = false;
} else if (!(postcode.charAt(0) == 6) && state == "WA") {
errMsgs.push("Your state and postcode do not match. State WA postcodes must start with a 6");
result = false;
} else if (!(postcode.charAt(0) == 5) && state == "SA") {
errMsgs.push("Your state and postcode do not match. State SA postcodes must start with a 5");
result = false;
} else if (!(postcode.charAt(0) == 7) && state == "TAS") {
errMsgs.push("Your state and postcode do not match. State TAS postcodes must start with a 7");
result = false;
} else if (!(postcode.charAt(0) == 0) && state == "ACT") {
errMsgs.push("Your state and postcode do not match. State ACT postcodes must start with a 0");
result = false;
} else {
result = true;
}
//Validation of other skill so checks if other skill box is checked and if so will check textbox for text
if (other && document.getElementById("otherText").value.trim().length===0) {
errMsgs.push("You have selected other skills, you must enter one other skill in the text box");
result = false;
}
if (errMsgs.length > 0) { //only display message box if there is something to show
document.getElementById("error").innerHTML = '<li>' + errMsgs.glue('</li><li>') + '</li>'; /* Apending the error messages as li*/
}
if (result == true) {
storeForm(firstName, familyName, midName, dob, male, female, street, suburb, state, postcode, email, number, XML, Java, Python, SQL, PERL, MySQL, Windows, UNIX, Linux, other, otherText)
}
return result; //if false the information will not be sent to the server
}