JavaScript Video Tutorial Pt 7

JavaScript Form ValidationIn 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”

  1. Punit says:

    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??

  2. Kelly Henagin says:

    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

    • admin says:

      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

      • Tavis says:

        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!

  3. maha says:

    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

  4. sammi says:

    excellent tutorial

  5. santosh says:

    what changes we have make so that this code works !!! I have tried lot to work on this code .. its not working

    • Derek Banas says:

      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

  6. Peter says:

    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.

Trackbacks/Pingbacks

  1. 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…

Leave a Reply

Your email address will not be published.

Google+