JavaScript Live Error Display?

Question

I need an efficient way to display errors I've collected from a form onsubmit function. Here is my error collecting function:

function checkForm(form) {

 var errors = "";

 errors += checkName(form, form.name.value);

 errors += checkSex(form, form.sex.value);

 if(form.gender[0].checked || form.gender[1].checked) {
      errors += checkGender(form, true);
 } else {
  errors += checkGender(form, false);
 }

 errors += checkHeight(form, form.height.value);

 errors += checkSalary(form, form.salary.value);

 errors += checkCountry(form, form.birthCountry.value);

 if(errors) {
        document.getElementById("errors").appendChild(document.createTextNode(errors));
  return false;
 }

 return true;

}

Unfortunately it seems that createTextNode() doesn't process new lines ( \n ) or HTML. How can I get past this? Or are there any other alternative, more efficient solutions?

Answer 1

In HTML, newlines and whitespace in general is ignored. To force a line break, you have to use the br tag. You could easily run a replace on the errors string, or just make the functions add those tags instead of a newline.

errors.replace( '\n', '<br />' )

You can then just append that to the element's innerHTML:

document.getElementById( 'errors' ).innerHTML += errors.replace( '\n', '<br />' );