Javascript HTML Form Validation without Programming

Here is a sample form. Enter data and notice the input validation on each field. NO JAVASCRIPT PROGRAMMING REQUIRED!
The types of checks performed are:

First Name: (required)
Last Name: (required)
Age : (required)(18-130)
Date Last Attended (MM/DD/YYYY) : Requested Time (military time):
Phone 999-999-9999: Zip Code : State:
Magic Code (####AA) :
Email :
SSN :
Attending? (required)
Message: (not required, 20-200 characters)



Directions:

  1. Download editcheck.js (right-click and choose Save Target As)
  2. At top of HTML file include this line:
    <script type="text/javascript" src="editcheck.js"></script>
  3. In the <FORM> tag add this event attribute:
    onsubmit="return valforms(this)"
    This will provide form validation when the Submit button is pressed for the form.

    You may also have immediate field validation by adding:
    onchange="return valforms(this.form,this)" to your <INPUT> tags.

  4. In each <input>, <select>, or <textarea> tag, add an editcheck attribute that describes the edit checks to occur.
    Example.
    Name: <input name=fullname type=text size=20 maxlength=20 editcheck="req=Y=Please enter your name.;cvt=UT">
    Birth Date: <input name=birthdt  type=text size=10 maxlength=10 editcheck="req=Y=Please enter your birthdate.;type=date">
    Zip Code: <input name=zip type=text size=11 maxlength=10 
      editcheck="req=Y=Zip Code is required.;type=zip=Please enter a valid US zip code.;cvt=~">
    

You may have multiple options separated by a semicolon (ie. editcheck="cvt=TU;type=alpha"). Each option has this format:

NAME=VALUE=ERROR MESSAGE

The error message is optional. Here are the options for attribute editcheck:
Name/ValueDescription
req=YRequired field - a value must be entered.
type=datatypeDatatype is one of these:
  • INT -Integer field, all digits
  • NUM -Numeric field, all digits plus decimal point.
  • ALPHA -Alphabetic field, all letters and spaces allowed
  • ALPHANUM -Alphanumeric field, all letters, digits, and spaces allowed
  • DATE -Date in format MM/DD/YYYY or MM/DD/YY
  • PHONE -Phone number 999-999-9999 or (999) 999-9999
  • EMAIL -A valid email, ie. bob@mycompany.com
  • ZIP -A valid 5 or 9 digit US zip code, hyphen optional ie. 32317
  • SSN -A valid 9 digit US social security #, hyphens optional, ie. 111-22-3333
  • STATE -A valid U.S. state abbreviation code, ie. FL - Florida, CA- California
  • Custom Types - If you do not specify one of the above types, then you are specifying a custom field type based on a regular expression. You are limiting the input field to a regular expression pattern. This is a powerful feature that offers endless validation options. Do not enter the beginning and ending /. For example, if you wanted to limit input to a two digit number: type=^\d{2}$.
minval=999For numeric fields, the minimum allowed value.
maxval=999For numeric fields, the maximum allowed value.
minlen=999The minimum # of characters in field if entered.
maxlen=999The maximum # of characters in field if entered.
eval=javascript validation stringValidation via javascript expression - a valid javascript expression must be entered. If the expression is false, the error message displays. See the source code for "Last Date Attended" above to see an example of preventing future dates
cvt=cmdstringConvert function- cmdstring is any combination of the following letters:
  • U -Convert the entered value to upper case letters.
  • L -Convert the entered value to lower case letters.
  • ] -Trim trailing spaces from entered value. NOTE: If your trim functions are after the REQ=Y command, the REQuired check will ignore spaces, but trimming will occur after the REQuired check.
  • [ -Trim leading spaces from entered value.
  • T -Trim leading and trailing spaces from entered value.
  • C -Crunch multiple spaces into one space.
  • ~ -Remove punctuation.