dom validating a form

@gokouSep 15.2003

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:

[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);[/code]

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

[code] var win2 = document.getElementById[window2][/code]

. Not too sure what to do after that.

heres the page ~~[url]~~http://www.uogameresources.com/sik/join.php[/url]

to post a comment

JavaScript

14 Comments(s) _↴

@JonaSep 15.2003 — #[font=arial][color=maroon]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.[/color][/font]

[b][J]ona[/b]

@gokouauthorSep 15.2003 — #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);

@JonaSep 15.2003 — #[font=arial][color=maroon]Perhaps something more along these lines:[/color][/font]

[font=monospace]

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

[/font]

[b][J]ona[/b]

@gokouauthorSep 15.2003 — #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 = "_______________________________nn";
 msg+= "The form was not Submitted because of the following error(s).n";
 msg+= "Please correct these error(s) and re-submit.n";
 msg+= "_______________________________nn";

Thanks

@JonaSep 15.2003 — #[font=arial][color=maroon]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:[/color][/font]

[font=monospace]

msg = "_______________________________ 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";

[/font]

[b][J]ona[/b]

@FangSep 15.2003 — #Use: document.getElementById("mcontent").innerHTML=msg;

Replace [COLOR=green]n[/COLOR] with [COLOR=green] [/COLOR]

@JonaSep 15.2003 — #[i]Originally posted by Fang [/i]

[B]Use: document.getElementById("mcontent").innerHTML=msg;

Replace [COLOR=green]n[/COLOR] with [COLOR=green] [/COLOR] [/B][/QUOTE]

[font=arial][color=maroon]Ask Charles about using innerHTML, Fang. Although it works, it's best to use the W3C recommended DOM objects instead.[/color][/font]

[b][J]ona[/b]

@FangSep 15.2003 — #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?).

@JonaSep 15.2003 — #[i]Originally posted by Fang [/i]

[B]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?). [/B][/QUOTE]

[font=arial][color=maroon]You're saying that 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.[/color][/font]

[b][J]ona[/b]

@FangSep 15.2003 — #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. ?

@JonaSep 15.2003 — #[font=arial][color=maroon]There is [i]innerText...[/i] :p

Nevertheless, I see your point. I'll remember that next time, thanks. ?[/color][/font]

[b][J]ona[/b]

@gokouauthorSep 15.2003 — #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 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+= "&lt;center&gt;The following required field(s) are empty:&lt;/center&gt;"
 +"&lt;center&gt;"+ empty_fields + "&lt;br&gt;";

@JonaSep 16.2003 — #[font=arial][color=maroon]The n character works in alerts, but not HTML. You must use , , <DIV> </DIV>, or some other block-level element...[/color][/font]

[b][J]ona[/b]

@JonaSep 16.2003 — #[font=arial][color=maroon]Also, although I've never tried it, I doubt that your method of appending tags (by creating nodes) will work... Hopefully it does, but you may have to do some extra coding for the other to work properly. [/color][/font]

[b][J]ona[/b]

Also in #JavaScript _↴

Disappearing Images Submit FORM to SAME PAGE losing args when sending a form with submit()

Success!

Help @gokou spread the word by sharing this article on Twitter...

Tweet This

dom validating a form

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

dom validating a form

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴