RegExp Validation

Travis Beckham Feb 21, 2006

Use this script for form validation using regular expressions. None of the information submitted in the form is saved. Very extensive.

The JavaScript Source: Forms : RegExp Validation

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

.required {
  color: red;
}

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com */

// |||||||||||||||||||||||||||||||||||||||||||||||||||||
//
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but
// please leave this message intact.
//
// |||||||||||||||||||||||||||||||||||||||||||||||||||||
// --- version date: 11/21/02 --------------------------

// returns true if the string is empty
function isEmpty(str){
  return (str == null) || (str.length == 0);
}
// returns true if the string is a valid email
function isEmail(str){
  if(isEmpty(str)) return false;
  var re = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i
  return re.test(str);
}
// returns true if the string only contains characters A-Z or a-z
function isAlpha(str){
  var re = /[^a-zA-Z]/g
  if (re.test(str)) return false;
  return true;
}
// returns true if the string only contains characters 0-9
function isNumeric(str){
  var re = /[\D]/g
  if (re.test(str)) return false;
  return true;
}
// returns true if the string only contains characters A-Z, a-z or 0-9
function isAlphaNumeric(str){
  var re = /[^a-zA-Z0-9]/g
  if (re.test(str)) return false;
  return true;
}
// returns true if the string's length equals "len"
function isLength(str, len){
  return str.length == len;
}
// returns true if the string's length is between "min" and "max"
function isLengthBetween(str, min, max){
  return (str.length >= min)&&(str.length <= max);
}
// returns true if the string is a US phone number formatted as...
// (000)000-0000, (000) 000-0000, 000-000-0000, 000.000.0000, 000 000 0000, 0000000000
function isPhoneNumber(str){
  var re = /^$?[2-9]\d{2}[$\.-]?\s?\d{3}[\s\.-]?\d{4}$/
  return re.test(str);
}
// returns true if the string is a valid date formatted as...
// mm dd yyyy, mm/dd/yyyy, mm.dd.yyyy, mm-dd-yyyy
function isDate(str){
  var re = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/
  if (!re.test(str)) return false;
  var result = str.match(re);
  var m = parseInt(result[1]);
  var d = parseInt(result[2]);
  var y = parseInt(result[3]);
  if(m < 1 || m > 12 || y < 1900 || y > 2100) return false;
  if(m == 2){
          var days = ((y % 4) == 0) ? 29 : 28;
  }else if(m == 4 || m == 6 || m == 9 || m == 11){
          var days = 30;
  }else{
          var days = 31;
  }
  return (d >= 1 && d <= days);
}
// returns true if "str1" is the same as the "str2"
function isMatch(str1, str2){
  return str1 == str2;
}
// returns true if the string contains only whitespace
// cannot check a password type input for whitespace
function isWhitespace(str){ // NOT USED IN FORM VALIDATION
  var re = /[\S]/g
  if (re.test(str)) return false;
  return true;
}
// removes any whitespace from the string and returns the result
// the value of "replacement" will be used to replace the whitespace (optional)
function stripWhitespace(str, replacement){// NOT USED IN FORM VALIDATION
  if (replacement == null) replacement = '';
  var result = str;
  var re = /\s/g
  if(str.search(re) != -1){
    result = str.replace(re, replacement);
  }
  return result;
}
// validate the form
function validateForm(f, preCheck){
  var errors = '';
  if(preCheck != null) errors += preCheck;
  var i,e,t,n,v;
  for(i=0; i < f.elements.length; i++){
    e = f.elements[i];
    if(e.optional) continue;
    t = e.type;
    n = e.name;
    v = e.value;
    if(t == 'text' || t == 'password' || t == 'textarea'){
      if(isEmpty(v)){
        errors += n+' cannot be empty.\n'; continue;
      }
      if(v == e.defaultValue){
        errors += n+' cannot use the default value.\n'; continue;
      }
      if(e.isAlpha){
        if(!isAlpha(v)){
          errors += n+' can only contain characters A-Z a-z.\n'; continue;
        }
      }
      if(e.isNumeric){
        if(!isNumeric(v)){
          errors += n+' can only contain characters 0-9.\n'; continue;
        }
      }
      if(e.isAlphaNumeric){
        if(!isAlphaNumeric(v)){
          errors += n+' can only contain characters A-Z a-z 0-9.\n'; continue;
        }
      }
      if(e.isEmail){
        if(!isEmail(v)){
          errors += v+' is not a valid email.\n'; continue;
        }
      }
      if(e.isLength != null){
        var len = e.isLength;
        if(!isLength(v,len)){
          errors += n+' must contain only '+len+' characters.\n'; continue;
        }
      }
      if(e.isLengthBetween != null){
        var min = e.isLengthBetween[0];
        var max = e.isLengthBetween[1];
        if(!isLengthBetween(v,min,max)){
          errors += n+' cannot contain less than '+min+' or more than '+max+' characters.\n'; continue;
        }
      }
      if(e.isPhoneNumber){
        if(!isPhoneNumber(v)){
          errors += v+' is not a valid US phone number.\n'; continue;
        }
      }
      if(e.isDate){
        if(!isDate(v)){
          errors += v+' is not a valid date.\n'; continue;
        }
      }
      if(e.isMatch != null){
        if(!isMatch(v, e.isMatch)){
          errors += n+' does not match.\n'; continue;
        }
      }
    }
    if(t.indexOf('select') != -1){
      if(isEmpty(e.options[e.selectedIndex].value)){
        errors += n+' needs an option selected.\n'; continue;
      }
    }
    if(t == 'file'){
      if(isEmpty(v)){
        errors += n+' needs a file to upload.\n'; continue;
      }
    }
  }
  if(errors != '') alert(errors);
  return errors == '';
}

/*
The following elements are not validated...

button   type="button"
checkbox type="checkbox"
hidden   type="hidden"
radio    type="radio"
reset    type="reset"
submit   type="submit"

All elements are assumed required and will only be validated for an
empty value or defaultValue unless specified by the following properties.

isEmail = true;          // valid email address
isAlpha = true;          // A-Z a-z characters only
isNumeric = true;        // 0-9 characters only
isAlphaNumeric = true;   // A-Z a-z 0-9 characters only
isLength = number;       // must be exact length
isLengthBetween = array; // [lowNumber, highNumber] must be between lowNumber and highNumber
isPhoneNumber = true;    // valid US phone number. See "isPhoneNumber()" comments for the formatting rules
isDate = true;           // valid date. See "isDate()" comments for the formatting rules
isMatch = string;        // must match string
optional = true;         // element will not be validated
*/

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// --------------------------------------------------
// ||||||||||||||||||||||||||||||||||||||||||||||||||

// All of the previous JavaScript is coded to process
// any form and should be kept in an external file if
// multiple forms are being processed.

// This function configures the previous
// form validation code for this form.
function configureValidation(f){
  f.firstname.isAlphaNumeric = true;
  f.lastname.isAlphaNumeric = true;
  f.email.isEmail = true;
  f.phone.isPhoneNumber = true;
  f.birthday.isDate = true;
  f.password1.isLengthBetween = [4,255];
  f.password2.isMatch = f.password1.value;
  f.comments.optional = true;
  var preCheck = (!f.infohtml.checked && !f.infocss.checked && !f.infojs.checked) ? 'select at least one checkbox.\n' : null;
  return validateForm(f, preCheck);
}

<div align="center">
  <form action="#" method="post" onsubmit="return configureValidation(this)" onreset="confirm('All form information will be erased.')">
    <table class="formtable">
      <tr>
        <td>First Name: <span class="required">*</span></td>
        <td><input type="text" name="firstname" value="" class="text"></td>
      </tr>
      <tr>
        <td>Last Name: <span class="required">*</span></td>
        <td><input type="text" name="lastname" value="" class="text"></td>
      </tr>
      <tr>
        <td>Email: <span class="required">*</span></td>
        <td><input type="text" name="email" value="" class="text"></td>
      </tr>
      <tr>
        <td>Email Preferred: <span class="required">*</span></td>
        <td><select name="emailpreferred">
          <option value="text">Text</option>
          <option value="html">HTML</option>
          <option value="flash">Flash</option>
        </select></td>
      </tr>
      <tr>
        <td>Phone: (US only) <span class="required">*</span></td>
        <td><input type="text" name="phone" value="(000) 000-0000" class="text"></td>
      </tr>
      <tr>
        <td>Birthday: <span class="required">*</span></td>
        <td><input type="text" name="birthday" value="mm/dd/yyyy" class="text"></td>
      </tr>
      <tr>
        <td>Gender:</td>
        <td>Male: <input type="radio" name="gender" value="male" class="radio" checked="checked"> Female: <input type="radio" name="gender" value="female" class="radio"></td>
      </tr>
      <tr>
        <td>Password1: <span class="required">*</span></td>
        <td><input type="password" name="password1" value="" class="text"></td>
      </tr>
      <tr>
        <td>Password2: <span class="required">*</span></td>
        <td><input type="password" name="password2" value="" class="text"></td>
      </tr>
      <tr>
        <td colspan="2">Select one or more of the following: <span class="required">*</span></td>
      </tr>
      <tr>
        <td colspan="2">HTML: <input type="checkbox" name="infohtml" value="true" class="checkbox"> CSS: <input type="checkbox" name="infocss" value="true" class="checkbox"> JavaScript: <input type="checkbox" name="infojs" value="true" class="checkbox"></td>
      </tr>
      <tr>
        <td>Comments:</td>
        <td><textarea name="comments" value="" class="text" cols="20" rows="4"></textarea></td>
      </tr>
      <tr>
        <td colspan="2"><hr></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="submit" name="submit" value="Submit" class="button"> <input type="reset" name="reset" value="Reset" class="button"></td>
      </tr>
    </table>
  </form>
</div>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

First Name: *
Last Name: *
Email: *
Email Preferred: *
Phone: (US only) *
Birthday: *
Gender:	Male: Female:
Password1: *
Password2: *
Select one or more of the following: *
HTML: CSS: JavaScript:
Comments:

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

RegExp Validation

Leave a Response

Attention JavaScript Coders

Go Deeper