JavaScript Video Tutorial Pt 7
In this part of my JavaScript Video Tutorial, I explain how to dynamically validate forms using JavaScript. This is also a review on how to use the Document Object Model and Regular Expressions.
If you missed the first part of this tutorial, it is available here JavaScript Video Tutorial.
I specifically cover how to:
- Validate User Input as it’s Entered
- Validate the Most Common Input Using Regular Expressions
- Create a Catch All Function for Validation
- Dynamically Create Warning Messages
All of the code used follows the video. If you have any questions or comments, leave them below.
Code From the Video
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Javascript Regular Expressions, Form Validation and Event Handlers</title>
<script type=”text/javascript”>
function editNodeText(regex, input, helpId, helpMessage)
{ // See if the visitor entered the right information
if (!regex.test(input)) { // If the wrong information was entered, warn them
if (helpId != null)
while (helpId.firstChild) // Remove any warnings that may exist
helpId.removeChild(helpId.firstChild);
helpId.appendChild(document.createTextNode(helpMessage)); // Add new warning
return false;
}
else { // If the right information was entered, clear the help message
if (helpId != null){
while (helpId.firstChild) // Remove any warnings that may exist
helpId.removeChild(helpId.firstChild);
}
return true;
} }
function isTheFieldEmpty(inputField, helpId) { // inputField – ID Number for the html text box
// helpId – ID Number for the child node I want to print a warning in
// See if the input value contains any text
return editNodeText(/^[A-Za-z\.\’ \-]{2,15}\s?[A-Za-z\.\’ \-]{2,15}\s?[A-Za-z\.\’ \-]{2,15}/, inputField.value, helpId, “Please enter a valid name.”);
} // inputField.value – Value typed in the html text box
function isAddressOk(inputField, helpId) { // See if the input value contains any text
return editNodeText(/^[A-Za-z0-9\.\’ \-]{5,30}$/, inputField.value, helpId, “Enter a Street (Ex.1234 Main St.)”);
}
function isStateOk(inputField, helpId) { // See if the input value contains any text
return editNodeText(/^A[LKSZRAEP]|C[AOT]|D[EC]|F[LM]|G[AU]|HI|I[ADLN]|K[SY]|LA|
M[ADEHINOPST]|N[CDEHJMVY]|O[HKR]|P[ARW]|RI|S[CD]|T[NX]|UT|V[AIT]|W[AIVY]$/, inputField.value, helpId, “Enter a State Code in Uppercase (Ex.NY, PA, CA)”);
}
function isPhoneOk(inputField, helpId) { // See if the input value contains any text
return editNodeText(/^([0-9]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})$/, inputField.value, helpId, “Enter a Phone Number (Ex.412-828-3000)”);
}
function isEmailOk(inputField, helpId) { // See if the input value contains any text
return editNodeText(/^[A-Za-z0-9._-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/, inputField.value, helpId, “Enter an Email (Ex. derekbanas@newthinktank.com)”);
}
</script>
</head>
<body>
<div> Enter your name: <input id=”name” name=”name” type=”text” size=”30″ onblur=”isTheFieldEmpty(this, document.getElementById(‘name_help’))” /> <span id=”name_help”></span> <!– this is the id number for the text box –> </div> <div> Enter your street address: <input id=”street” name=”street” type=”text” size=”30″ onblur=”isAddressOk(this, document.getElementById(‘street_help’))” /> <span id=”street_help”></span> </div> <div> Enter your city: <input id=”city” name=”city” type=”text” size=”30″ onblur=”isTheFieldEmpty(this, document.getElementById(‘city_help’))” /> <span id=”city_help”></span> </div> <div> Enter your state code: <input id=”state” name=”state” type=”text” size=”2″ onblur=”isStateOk(this, document.getElementById(‘state_help’))” /> <span id=”state_help”></span> </div> <div> Enter your phone number: <input id=”phone” name=”phone” type=”text” size=”15″ onblur=”isPhoneOk(this, document.getElementById(‘phone_help’))” /> <span id=”phone_help”></span> </div> <div> Enter your email: <input id=”email” name=”email” type=”text” size=”30″ onblur=”isEmailOk(this, document.getElementById(’email_help’))” /> <span id=”email_help”></span> </div> <div> Click Button for a 3 Second Alarm: <input id=”alarm” name=”alarm” type=”button” value=”Set Alarm” onclick=”setTimeout(‘alert(\’3 seconds!\’)’,3000)” /> </div>
</body></html>
14 Responses to “JavaScript Video Tutorial Pt 7”
Trackbacks/Pingbacks
- Tweets that mention JavaScript Video Tutorial Form Validation | New Think Tank -- Topsy.com - [...] This post was mentioned on Twitter by elearningstarr and Daniel Taylor, Web Design Magazine. Web Design Magazine said: JavaScript…
hey you talked about intercepting proxies in this tutorial, can you please tell me what are they??
and how the make the client side validation less secure??
I cover pretty much every way hackers attack in this tutorial PHP Security. I talk at length about intercepting proxies and a bunch more
First, thank you for the great tutorials!
I have copied the scprit from javascript pt.7.
Went I run the file only the form shows, no validation.
Firefox tells me there are four errors best I can tell it’s the (this,document.getElementById.
I see this script working just fine in the video, can you explain why I’m not getting any validation?
Thanks
Hi, Most of the problems stem from the fact that you need to change all back quotes into normal quotes in my code. That was done in old tutorials for security reasons. Sorry about that. I’ll fix that issue soon. Just do find and replace on the quotes and you’ll be good to go
I love you work. However, as noted above, I copied your code and have the issue. I can’t see any back quotes either when I do a find and replace (assuming you’re referring to a: ` character).
Thanks!
I’m sorry, but I can’t find your original comment. What error are you getting, or what isn’t working
sir
according to your guidence i change all back qoutes into normal qoutes but still validation function does not work.please tell me whats wrong with it or send me the exact code on my id.please please my id is maha_moon49@yahoo.com. thanks a lot
Hi, What problem are you having. There is normally some simple little error that causes the problem. I’ll recheck the code
excellent tutorial
Thank you very much 🙂
what changes we have make so that this code works !!! I have tried lot to work on this code .. its not working
I just double checked it and it works on my computer. What error are you getting? You have to do a quick find replace to change the ” and “s into ” and it should work. Sorry that is an old security thing I used to use
Hey Derek,
first of all, thanks for all your awesome tutorials! In terms of the code, it worked fine after I firstly replaced all kind of back quotes (” and ‘) into normal quotes and secondly deleted the line break in the return command of the “isStateOk” function.
Sorry about that. That is an old security feature I’ve been meaning to fix. None of my newer tutorials have that issue. I’ll fix them ASAP