Search within TutorialsPark

Javascript Regular Expressions: Form Validation


Using Regular Expressions for Form Validations


Javascript Regular Expressions: Form Validation

Everyone must have filled an online form at some stage, a form usually asks for information related to name, phone no, address, credit-card no etc.

Incase you didn't provide information in the format specified by the form field or leave it empty, the message will appear and form cannot be submitted until you get it right.

This is done using a Javascript program on the client side, the Javascript program uses a regular expression pattern to test the input of each form field.


Javascript Form Validation: Checking for Empty fields

Usually, in a form some fields are optional while some fields are mandatory, hence a javascript program is used to check if the input field is empty or null.

The demo below , uses a function to check if value in the form field is empty or null.

Example: JavaScript Form Validation Checking for Empty fields.

Give it a TRY! » Note:If the return value is false the form is not submitted until a value is supplied.


JavaScript Form Validaiton: Checking for Zip Codes

A simple six digit zipcode can be checked using regular expression which matches exactly six digits : /^d{6}$/

Another way can be /^[0-9][0-9][0-9][0-9][0-9][0-9]$/ , for zipcode with dash in between it can be /^\d{6}-?\d{5}$ .

Example: JavaScript Form Validation: Checking for Zip Codes

Give it a TRY! » Note:If no input is provided an alert dialog box will appear.


Javascript Form Validation: Alphabetic Data Input

There may be some form fields whose values must be strictly alphabetic characters, eg: Name, Country, State.

In the below demo the regular expression looks for one or more uppercase or lowercase letters within the character class [A-Za-z], followed with an end of a line anchor $

Example: JavaScript Form Validation - Alphabetic Data Input.

Give it a TRY! » Note:If any number is supplied as a value an alert box will be shown.


JavaScript Form Validation: Removing Spaces and Dashes

Some undesired spaces and dashes from the user input can be removed by using the string object replace() method.

The regular expression is used to find the characters and then replace them with empty spaces.

Example: JavaScript Form Validation: Removing Spaces

Give it a TRY! » Note: The regular expression searches for one or multiple spaces or dashes, globally.


JavaScript Form Validation: Removing Unwanted Parentheses

Unwanted parentheses surrounding area codes or telephone numbers, can be removed using regular expression and method replace()

The regular expression searches for one or more parentheses, spaces or dashes , globally.

Example: JavaScript Form Validation: Remove Unwanted Parentheses

Give it a TRY! » Note: The regular expression removes parentheses, spaces and dashes, but numbers or letters will remain intact.


JavaScript Form Validation: Removing Nondigits

Nondigit(i.e character that is not a digit ) can be removed using the regular expression [^0-9] or \D. Eg: nondigits in zipcodes, phone numbers etc.

Example: JavaScript Form Validation: Removing Non Digits

Give it a TRY! » Note: The regex ^D/g finds nondigits and then replaces them with empty string " " .


JavaScript Form Validation: Removing Nonaplhanumeric Characters

The characters that are not a letter, number or underscore can be removed and replaced using regex [^0-9a-zA-Z] or \W.

Example: JavaScript Form Validation: Remove Non Alphanumeric Characters

Give it a TRY! » Note: The regex ^W/g searches for nonalphanumeric characters and replaces with empty string " " .


JavaScript Form Validation: Phone Numbers

An USA phone number has ten digits, it comprises of : a three digit area code, subscriber number of seven digit.

The area code may have a parentheses around the area code, and dashes or spaces seperating the numbers in the subscriber number.

Example: JavaScript Form Validation: Phone Numbers

Give it a TRY! » Note: The phone number is of type (XXX)-XXX-XXXX , XXX-XXX-XXXX or XXXXXXXXXX


JavaScript Form Validation: Check E-Mail Address

An email address has a format of type : An @ sign , a dot between address and domian and At least six characters

The regular expression for e-mail validation is : / ^ ( ( [ \ - \ w ] + ) \ . ? ) + @ ( ( [ \ - \ w ] + ) \ . ? ) + \ . [ a - zA -Z ] { 2 , 4 } $ /

^ : Go to beginning of the line.

([\-\w]+)\.? : To check username consists of one or more dashes or word characters grouped by parentheses, followed by a literal period.

(([\-\w]+)\.?)+ : username can consists of more than one set of word characters seperated by a single dots.

@ : To check for @ symbol required in the email address.

(([\-\w]+)\.?)+ : username can consists of more than one set of word characters seperated by a single dots.

(([\-\w]+)\.?)+ : The email server name is similar to user name as well.

[a-zA-Z]{2,4} : The mail server name is followed by the domain name, which is usually of 2 to 4 characters.Eg: .com, .in , .info etc.

$ : To see that no extra character is added to the end of the email address.

Example: JavaScript Form Validation: Email Address.

Give it a TRY! » Note: If an invalid email address was provided, an alert box is displayed.


JavaScript Form Validaiton: Credit Card Validation

For a credit card number the real validation happens on the server side, but some preliminary pattern checking is done on the server end as well.

A details in a credit card comprises of Expiration Date , Card No etc.


JavaScript Credit Card Validation: Card Expiration Date

The expiration date of a credit card ia date that hasn't passed yet. The month and year both are represented in two digits.

Example: JavaScript Form Validation: Expiration Date

Give it a TRY! » Note:Here 2000 is added to the expiration date value, if input is 04 the value is 2004