Form Validation

Code
Demos & Examples

Overview

VM UI Framework provides form validation for almost every type of form element with over 20 unique validators, plus the ability to create your own using regular expressions. The form validation is live and is activated on either the blur event for individual form elements or on the submit event for the form. If a field validates, it will turn green, with either the default or a customized success message.

Usage

Each form element must have a unique id. Validations are added to a field using the data attribute data-validate, which takes a JSON object as a value. The JSON object should have the validator names as keys. Each key should have the value of another object, with two possible keys: error and params.

Each validator has a default error, which you can override with your own error message. However, if you want to use the default error message, simply omit the error key.

Some validators will need you to pass in parameters in order to function. For those validators, the params key is required. If the validator doesn't require parameters, omit the params key. You will need to pay special attention to what type of parameter value is required for each validator as they vary.

If you want to use the default error message and the validator doesn't have parameters, simply pass in an empty object as the value for the validator key.

Custom Success Messages

If you would like to pass in a custom message to displayed on successful validation, use the data-success attribute. Since there is only one success message per form field, the value of data-success is simply a string.

  1. <!-- A simple required validator with a custom success message -->
  2. <label for="required">Required Input</label>
  3. <input type="text" data-validate="{required:{}}" data-success="Awesome!" name="required"/>
Validation Examples
  1. <!-- A simple required validator with no customization -->
  2. <label for="required">Required Input</label>
  3. <input type="text" data-validate="{required:{}}" name="required"/>
  5. <!-- A required validator with a custom error -->
  6. <label for="custom">Required Input</label>
  7. <input type="text" data-validate="{required:{error: 'This is a custom error'}}" name="custom"/>
  9. <!-- A minLength validator with a parameter -->
  10. <label for="min">MinLength: 5</label>
  11. <input type="text" data-validate="{minLength:{params:5}}" name="min"/>
  13. <!-- Multiple validators with a range validator with an array parameter -->
  14. <label for="range">Required Input, Range: 3,8</label>
  15. <input type="text" data-validate="{required:{}, range:{params:[3,8]}}" name="range"/>

Return to top

Validators

Form Validators
Validator Name Description Required Parameters
required Makes the field required. None
regex A custom regular expression to be evaluted. Note If you use regex, be sure to pass in a custom error message as the default message won't be very helpful to users. regex string regex
minLength Enforces a minimum length on the input value. integer minValue
maxLength Enforces a maximum length on the input value. integer maxValue
range Enforces a both a minimum and a maximum length on the input value. array [minValue, maxValue]
matches The field value must match the value of the field name passed in as a parameter. Useful for password matching fields. string matchName
differs The opposite of matches. Ensures two fields do not have the same value. string differName
includes The field must contain one of the passed in values. array [value1, value2, ...]
excludes The field cannot contain one of the passed in values. array [value1, value2, ...]
alpha Only alphabetic character are accepted. None
numeric Only numeric character are accepted. None
alphanumeric Only alphanumeric character are accepted. None
email Requires a valid email address. None
url Requires a valid URL. None
password Password must contain one lowercase letter, one uppercase letter, one number, and be at least 6 characters long. None
usZip Validates US ZIP codes. None
canadaPostal Validates Canadian postal codes. None
credit Validates all major credit cards. None
dateMDY Tests a date for a M/D/Y format. None
dateYMD Tests a date for a Y/M/D format. None
imageFile For use with file inputs. Tests to see if the selected file is an image. None
phone Validates North American phone number formats. None

Return to top

Demos

Required Elements

Required Elements Demo
Select An Option▼
Required Elements Code Example
  1. <form id="requiredForm">
  2. <label for="required">Required Input</label>
  3. <input type="text" data-validate="{required:{}}" name="required"/>
  4. <label for="options">Options</label>
  5. <select name="options" data-validate="{required:{}}">
  6. <option value="">Select An Option</option>
  7. <option value="1">Option 1</option>
  8. <option value="2">Option 2</option>
  9. <option value="3">Option 3</option>
  10. </select>
  11. <label for="message">Message</label>
  12. <textarea name="message" class="col4" data-validate="{required:{}}"></textarea>
  13. <label for="file">File</label>
  14. <input type="file" data-validate="{required:{}}" name="file"/>
  15. <label for="checkbox"><input type="checkbox" data-validate="{required:{}}" name="checkbox" /> Required Checkbox</label>
  16. <label for="radio">Required Radio</label>
  17. <label><input type="radio" data-validate="{required:{}}" value="1" name="radio" /> Option 1</label>
  18. <label><input type="radio" data-validate="{required:{}}" value="2" name="radio" /> Option 2</label>
  19. <label><input type="radio" data-validate="{required:{}}" value="3" name="radio" /> Option 3</label>
  20. <input type="submit" class="largeInfoButton" value="Submit" />
  21. </form>

Return to top

Custom Regex

Custom Regex Demo
Custom Regex Code Example
  1. <form id="regexForm">
  2. <label for="regex">Custom Regex: (Must contain 'pizza')</label>
  3. <input type="text" data-validate="{regex:{params:'pizza'}}" name="regex"/>
  4. <input type="submit" class="largeInfoButton" value="Submit" />
  5. </form>

Return to top

Input Length

Input Length Demo
Input Length Code Example
  1. <form id="lengthForm">
  2. <label for="min">MinLength: 5</label>
  3. <input type="text" data-validate="{minLength:{params:5}}" name="min"/>
  4. <label for="max">Required Input, MaxLength: 5</label>
  5. <input type="text" data-validate="{required:{}, maxLength:{params:5}}" name="max"/>
  6. <label for="range">Required Input, Range: 3,8</label>
  7. <input type="text" data-validate="{required:{}, range:{params:[3,8]}}" name="range"/>
  8. <input type="submit" class="largeInfoButton" value="Submit" />
  9. </form>

Return to top

Matching

Matching Demo
Matching Code Example
  1. <form id="matchingForm">
  2. <label for="test">Test Field To Match</label>
  3. <input type="text" data-validate="{required:{}}" name="test"/>
  4. <label for="matches">Matches Test Field</label>
  5. <input type="text" data-validate="{required:{}, matches:{params:'test'}}" name="matches"/>
  6. <label for="differs">Differs From Test Field</label>
  7. <input type="text" data-validate="{required:{}, differs:{params:'test'}}" name="differs"/>
  8. <input type="submit" class="largeInfoButton" value="Submit" />
  9. </form>

Return to top

List Comparison

List Comparison Demo
List Comparison Code Example
  1. <form id="listForm">
  2. <label for="includes">Includes: (Must contain 'pizza', 'steak', or 'fries')</label>
  3. <input type="text" data-validate="{includes:{params:['pizza', 'steak', 'fries']}}" name="includes"/>
  4. <label for="excludes">Excludes: (Cannot contain 'onions', 'salad', or 'mayo')</label>
  5. <input type="text" data-validate="{excludes:{params:['onions', 'salad', 'mayo']}}" name="excludes"/>
  6. <input type="submit" class="largeInfoButton" value="Submit" />
  7. </form>

Return to top

Alphanumeric

Alphanumeric Demo
Alphanumeric Code Example
  1. <form id="alphanumericForm">
  2. <label for="alpha">Alpha Only</label>
  3. <input type="text" data-validate="{alpha:{}}" name="alpha"/>
  4. <label for="numeric">Numeric Only</label>
  5. <input type="text" data-validate="{numeric:{}}" name="numeric"/>
  6. <label for="alphanumeric">Alphanumeric Only</label>
  7. <input type="text" data-validate="{alphanumeric:{}}" name="alphanumeric"/>
  8. <input type="submit" class="largeInfoButton" value="Submit" />
  9. </form>

Return to top

Common Validations

Common Validations Demo
Common Validations Code Example
  1. <form id="commonForm">
  2. <label for="email">Email</label>
  3. <input type="text" data-validate="{email:{}}" name="email"/>
  4. <label for="url">URL</label>
  5. <input type="text" data-validate="{url:{}}" name="url"/>
  6. <label for="password">Password</label>
  7. <input type="text" data-validate="{password:{}}" name="password"/>
  8. <label for="phone">Phone</label>
  9. <input type="text" data-validate="{phone:{}}" name="phone"/>
  10. <label for="credit">Credit Card</label>
  11. <input type="text" data-validate="{credit:{}}" name="credit"/>
  12. <input type="submit" class="largeInfoButton" value="Submit" />
  13. </form>

Return to top

Postal Codes

Postal Codes Demo
Postal Codes Code Example
  1. <form id="postalForm">
  2. >label for="zip"<US ZIP Code>/label<
  3. >input type="text" data-validate="{usZip:{}}" name="zip"/<
  4. >label for="canada"<Canadian Postal Code>/label<
  5. >input type="text" data-validate="{canadaPostal:{}}" name="canada"/<
  6. <input type="submit" class="largeInfoButton" value="Submit" />
  7. </form>

Return to top

Dates

Dates Demo
Dates Code Example
  1. <form id="dates">
  2. <label for="mdy">Date: M/D/Y</label>
  3. <input type="text" data-validate="{dateMDY:{}}" name="mdy"/>
  4. <label for="ymd">Date: Y/M/D</label>
  5. <input type="text" data-validate="{dateYMD:{}}" name="ymd"/>
  6. <input type="submit" class="largeInfoButton" value="Submit" />
  7. </form>

Return to top

Image Files

Image Files Demo
Image Files Code Example
  1. <form id="imageForm">
  2. <label for="image">Upload an image file</label>
  3. <input type="file" data-validate="{imageFile:{}}" name="image"/>
  4. <input type="submit" class="largeInfoButton" value="Submit" />
  5. </form>

Return to top

Want to continue the tour?

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.