dom validating a form

[gokou]

The site is made with css, no tables.

I made a script to validate a form and when the form has errors, it displays an error message. I have a few problems with it. I can't make it display the error where I want it to. I want it to display right below the form within the same css window. That windows classes name is window2. The dom code:


var emsg = document.createElement("div");
emsg.style.width="auto";
emsg.style.border="outset gray 3px";
emsg.appendChild(document.createTextNode(msg));
document.body.appendChild(emsg);

I've tryed changing the last part to [document.window2.appendChild(emsg)[/code] ,but that just displays an error. One thing I haven't tryed is changing class to id for that window and then getting the id by using var win2 = document.getElementById[window2]. Not too sure what to do after that.

heres the page http://www.uogameresources.com/sik/join.php

[Jona]

Set the position to absolute and set its position absolutely (top, left or bottom, right values). Also, check to see if the DIV already exists, otherwise you'll end up with the DIV being appended to the document multiple times.

[J]ona

[gokou]

I could do that, but i'm trying to embed the div element inside the window2(I made a mistake, it's mcontent), so that it's within it's border. I just tryed this and it didn't work, but you can probably see what i'm trying to do.

var emsg = document.createElement("div");
emsg.style.width="auto";
emsg.style.border="outset gray 3px";
emsg.appendChild(document.createTextNode(msg));
document.getElementById("mcontent");
document.mcontent.appendChild(emsg);

[Jona]

Perhaps something more along these lines:


var emsg = document.createElement("div");
emsg.style.width="auto";
emsg.style.border="outset gray 3px";
emsg.appendChild(document.createTextNode(msg));
document.getElementById("mcontent").appendChild(emsg);


[J]ona

[gokou]

Cool, that worked. I have one other problem. The javascript line breakers don't work with this dom code. Is there another way around that? Heres the javascript msg variable.

msg = "_______________________________\n\n";
msg+= "The form was not Submitted because of the following error(s).\n";
msg+= "Please correct these error(s) and re-submit.\n";
msg+= "_______________________________\n\n";

Thanks

[Jona]

The newline character (\n) puts a new line in the source code, but not in the document itself. Since you're appending the object to the HTML, it will be HTML-formatted. Thus:


msg = "_______________________________<br><br>\n";
msg+= "The form was not Submitted because of the following error(s).\n";
msg+= "Please correct these error(s) and re-submit.\n";
msg+= "_______________________________<br><br>\n";


[J]ona

[Fang]

Use: document.getElementById("mcontent").innerHTML=msg;
Replace \n with <br>

[Jona]

Originally posted by Fang
Use: document.getElementById("mcontent").innerHTML=msg;
Replace \n with <br>

Ask Charles about using innerHTML, Fang. Although it works, it's best to use the W3C recommended DOM objects instead.

[J]ona

[Fang]

I understand that, but your method of adding line breaks will only work with innerHTML.
The alternative (DOM compliant) is to add a few more nodes for the line breaks (several divs?).

[Jona]

Originally posted by Fang
I understand that, but your method of adding line breaks will only work with innerHTML.
The alternative (DOM compliant) is to add a few more nodes for the line breaks (several divs?).

You're saying that <br> would be displayed on the page, instead of the HTML actually formatting? Hmm... I was unaware of that (as I've never tested it, really, lol).

Also, use emsg.setAttribute('attributename', 'value'); instead of emsg.attribute = "value"; to be more DOM compliant, gokou.

[J]ona

[Fang]

A "TextNode" can only contain text, no mark-up.
That's why innerHTML is used so much, it's easier for text with mark-up. :)

[Jona]

There is innerText... :p
Nevertheless, I see your point. I'll remember that next time, thanks. :)

[J]ona

[gokou]

Sorry for not replying for awhile. Thanks for all the help.

I used innerHTML and that works good except it doesn't work for netscape. It's good enough for now. Later on i'll experiment with nodes. I think this would work.

var brt = document.createElement("br");

Then use it like this..

msg = "_______________________________"+brt +brt;

Theres one other problem, not a big deal though. The part of the msg variable that displays all the empty fields. There is suppose to be a <br> after every empty field, but it just displays them all in one line. It use to work in an alert tag, using \n, but I can see why. Heres that part of the msg variable.

msg+= "<center>The following required field(s) are empty:</center>"
+"<center>"+ empty_fields + "<br>";

[Jona]

The \n character works in alerts, but not HTML. You must use <BR>, <P> </P>, <DIV> </DIV>, or some other block-level element...

[J]ona

[Jona]

Also, although I've never tried it, I doubt that your method of appending <BR> tags (by creating nodes) will work... Hopefully it does, but you may have to do some extra coding for the other to work properly.

[J]ona