Home arrow DHTML arrow Page 4 - Rough Guide To The DOM (part 2)

Well-Formed - DHTML

Now that you know the theory behind the new DOM, it's time totake off the gloves and get your hands dirty. In this article, find out howthe new rules apply to old favourites like image swaps, form validation andframe navigation, and then learn how to use ordinary JavaScript to add andremove elements from the document tree on the fly.

  1. Rough Guide To The DOM (part 2)
  2. Making The Swap()
  3. Turning The Tables
  4. Well-Formed
  5. In The Frame
  6. Branching Out
  7. Dumbing It Down
  8. Conclusions
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 5
May 09, 2001

print this article


Another very popular use of JavaScript is form validation - verifying the data entered into an online form. In the next example, I'll be using the DOM and some simple JavaScript to ensure that the checkbox is ticked and the email address entered into the text field is in the correct format. Here's the form

<html> <head> </head> <body> <form action="somescript.cgi" method="post" onSubmit="return check();"> Email address: <br> <input id="email" type="text" name="email" size="30"> <br> <input id="spam_me" type="Checkbox" name="spam_me">Yes, I want you to send me megabytes of useless advertisements via email. I love buying crummy products from people who probably flunked kindergarten. <br> <input type="submit"> </form> </body> </html>

and here's the validation script.

<script language="JavaScript"> function checkEmail() { // get to the field var obj = document.getElementById("email"); // value of field var str = obj.value; // define pattern to match email address var pattern = /^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)+/; // match the string to the pattern var flag = pattern.test(str); if(!flag) { alert ("Please enter a valid email address"); return false; } else { return true; } } function checkSpam() { // get to the field var obj = document.getElementById("spam_me"); // checkbox ticked? if (obj.checked) { return true; } else { alert ("Please check the box"); return false; } } function check() { // perform validation and submit form if all is well if(checkEmail() && checkSpam()) { return true; } else { return false; } } </script>

As you can see, the form is submitted only after receiving a positive (true) result from the JavaScript function check(). This function, in turn, calls the functions checkEmail() and checkSpam(),which first obtain references to their respective form elements and then check their values for validity.

This article copyright Melonfire 2001. All rights reserved.

>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates


Dev Shed Tutorial Topics: