Error messages showing on next line

Question

I have an error message that pops up at the top of my form when something is wrong but the errors stay on the same line. How do I make them go under each other or under the correct place on the web page? I have the below code on my html to display my error message at the moment. If needed I can show my html as well.

<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
}

"\n" is interpreted as a space for navigator, use "
" like Satpal say — ekans, Sep 28 '17 at 12:17
Possible duplicate of [JavaScript string newline character?](https://stackoverflow.com/questions/1155678/javascript-string-newline-character) — Amit Kumar Singh, Sep 28 '17 at 12:17
why don't you prefer best practices ? define `var err = []` push all individual error with UL/OL list .. — Sumeet Gohil, Sep 28 '17 at 12:20
in HTML, you should use
to break new line, not "\n", if you want to break new line on "\n" position, you can just change your `document.getElementById("error").innerHTML = errMsg;` code to `document.getElementById("error").innerHTML = errMsg.split("\n").join("
");` — Carson, Sep 28 '17 at 12:24

score 0 · Accepted Answer · answered Sep 28 '17 at 12:32

@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;

I have written this code on the fly .. to the editor here. but i am sure i have clear my point. any doubt post comment below.

score 0 · Answer 2 · answered Sep 28 '17 at 13:02

I think the better code architecture would be as follows as it gives your more control keeping the sync with your exisiting design.

<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
}

Error messages showing on next line

2 Answers2