Working with Forms - JavaScript

Need to match and replace patterns on a Web page? You don't need Perl or PHP - JavaScript can do the job just as well. In this article, find out how, with an introduction to the JavaScript RegExp object and its methods. After reading this tutorial, I'm pretty sure you're going to look at JavaScript in a different light. The language ins't the one most commonly associated with image swaps and browser detection, but it serves as a powerful tool to help you execute pattern-matching tasks in the client quickly and efficiently.

TABLE OF CONTENTS:

By: Harish Kamath, (c) Melonfire

Poor Best

Rating:

/ 144

February 09, 2004

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Now that you know how it all works, let's look at a practical example of how you can put this knowledge to good use. Consider the following example, which displays an HTML form asking the user for credit card and email information to complete a purchase.

<html> <head> <script language="Javascript">  // requires regex to be passed as a parameter function checkField(theForm, theField, theFieldDisplay, objRegex) { objField = eval("document." + theForm + "." + theField); if(!objRegex.test(objField.value)) { alert ("Please enter a valid " + theFieldDisplay + ""); objField.select(); objField.focus(); return (false); } return (true); } // regex for the various form fields // credit card number // must contain 20 digits, nothing more, nothing less objPatCCNum = /^[0-9]{20}$/; // credit card date of expiry // must be month between 01 - 12 and year between 2003 to 2010 objPatCCDOE = /^([0][1-9]|[1][1-2])/20(0[3-9]|10)$/; // credit card PIN code // must be numeric objPatCCPin = /^[0-9]+$/; // email address // must be in user@host format objPatCCEmail = /^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/; // check the various form fields function checkForm(theForm) { if(checkField(theForm, "cc_num", "Credit card number", objPatCCNum) && checkField(theForm, "cc_doe", "Date of expiry", objPatCCDOE) && checkField(theForm, "cc_pin", "PIN code", objPatCCPin) && checkField(theForm, "cc_email", "Email address", objPatCCEmail)) { return true; } else { return false; } } // stop hiding --> </script> </head> <body> <h2>Credit Card Information</h2> <form name="frmCCValidation" onSubmit="return checkForm('frmCCValidation');"> Credit card number <br> <input name="cc_num" type="text"> <p> Credit card type <br> <select name="cc_type"> <option value="Visa">Visa</option> <option value="Mastercard">Mastercard</option> <option value="AmericanExpress">American Express</option> </select> <p> Credit card expiry date (mm/yyyy) <br> <input name="cc_doe" type="text"> <p> PIN code of card billing address <br> <input name="cc_pin" type="text"> <p> Email address <br> <input name="cc_email" type="text"> <p> <input type="submit" value="Send"> </form> </body> </html>

You'll notice, in the example above, that I've used numerous regular expressions to verify that the data being entered into the form by the user is of the correct format. This type of client-side input validation is extremely important on the Web, to ensure that the data you receive is accurate, and in the correct format.

Next: Over And Out >>