Form Validation Tool

HTML Attributes for Controls

Validation Attributes

Under this validation tool. Most validation requirements for each input are configured within the HTML code of that input element. This requires usage of HTML5 data attribute. For the validation usage, the input element validation attributes start with 'data-val-' and ends with additional strings for more specific requirements.

Following are all the different atributes and their possible values:

Attribute	Values	Description
data-val-required=""	'1' For true '0' For false or skip this attribute	REQUIRED Field Marks an input element as required. Can be applied to any input types.
data-val-error-title=""	String Supply a title (String=the title)	Error Bubble Title This is the title text for the error bubble, if validation fails. Optional.
data-val-error-text=""	String Supply an error message (String=the message)	Error Bubble Text This is the error message for the error bubble, if validation fails. Optional. If not supplied, the error bubble will not display.
data-val-min-length=""	n Supply a number (n=a number)	Minimum Length Checks the minimum length of the supplied value. Optional. Can be applied whether or not an element is required.
data-val-checkType=""	'number' Check valid number 'alphanumeric' Check valid alphanumeric entry 'email' Check valid email 'url' Check valid numeric 'phone' Check valid numeric 'date' Check valid numeric 'time' Check valid numeric	Data type Checks to make sure the value matches the supplied pre-defined data types. A few pre-defined data types are available in the tool kit. Optional. Can be applied whether or not an element is required. Data type formats can be checked for the 'number', 'alphanumeric', 'phone', 'date' and 'time' using the atribute 'data-val-checkFormat.
data-val-checkFormat=""	'num' - General numbers. Can be whole, decimal, positive or negative 'neg' - Negative numbers - whole or decimal 'pos' - Positive numbers - whole or decimal 'int' - Integers only - negative or positive 'neg-int' - Negative integers only 'pos-int' - Positive integers only 'float' - Float only - negative or positive 'neg-float' - Negative floats only 'pos-float' - Positive floats only	Number Formats Works with the data-val-checkType="number" attribute. Checks the input value to match a specific type of number. Optional. Default is 'num' when this format attribute is skipped.
	'username' - Username format. 'password' - password format. 'name' - name format.	Alphanumeric Formats Works with the data-val-checkType="alphanumeric" attribute. Optional. There is no default. Checks for a string with purely letters and numbers with no spaces or special characters if not supplied. name - will check of alphanumeric input with optional space, dash (-), comma (,) and period (.). Minimum length is not checked in this format.
	'us' - US phone number formats 'international' - International.	Phone Formats Works with the data-val-checkType="phone" attribute. Checks the input value to match US or International phone formats. However, because of US and international phone formatting differences, this is a loosely implemented validation that may accept non-valid phones. It also allows typing in extensions. For international formats, it keeps the validation logic quite loose to accomodate the varying types of international numbers. Starts with a + sign and allows 7 to 18 digits. Optional. Default is 'us' when this format attribute is skipped.
	'm/d/yy' - Allows these formats: 01/02/12 or 1/2/12 'mm/dd/yy' - Allows these format: 01/02/12 'm/d/yyyy' - Allows these formats: 01/02/2012 or 1/2/2012 'mm/dd/yyyy' - Allows these format: 01/02/2012 'M d, yy' - Allows these formats: Jan 2, 12 or January 02, 12 'M dd, yy' - Allows these formats: Jan 02, 12 'M d, yyyy' - Allows these formats: Jan 2, 2012 or January 02, 2012 'M dd, yyyy' - Allows these formats: Jan 02, 2012 'MM d, yy' - Allows these formats: January 2, 12 or January 02, 12 'MM dd, yy' - Allows these formats: January 02, 12 'MM d, yyyy' - Allows these formats: January 2, 2012 or January 02, 2012 'MM dd, yyyy' - Allows these formats: January 02, 2012	Date Formats Works with the data-val-checkType="date" attribute. Checks the input value to match various date formats. Optional. Defaults are 'm/d/yy', 'm/d/yyyy', 'M d, yy', 'M d, yyyy', 'MM d, yy', 'MM d, yyyy' when this format attribute is skipped.
	Formats without am/pm or 24 hours: 'hh:mm' - Allows these formats: 01:05 'h:m' - Allows these formats: 01:05 and 1:5 'hh:mm:ss' - Allows these formats: 01:05:09 'h:m:s' - Allows these formats: 01:05:09 and 1:5:9 Supply AM or PM (am, AM, pm or PM) to above formats: 'hh:mm a' - Allows these formats: 01:05 AM 'h:m a' - Allows these formats: 01:05 AM and 1:5 AM 'hh:mm:ss a' - Allows these formats: 01:05:09 AM 'h:m:s a' - Allows these formats: 01:05:09 AM and 1:5:9 AM 24 hour formats: 'HH:mm' - Allows these formats: 01:05 'H:m' - Allows these formats: 01:05 and 1:5 'HH:mm:ss' - Allows these formats: 01:05:09 'H:m:s' - Allows these formats: 01:05:09 and 1:5:9	Time Formats Works with the data-val-checkType="time" attribute. Checks the input value to match various time formats. Optional. Default is 'h:m a' when this format attribute is skipped.
data-val-checkAgainst=""	String - Any string	Compare with a String Checks if the value is equal to the supplied string i.e. data-val-checkAgainst="United States". Optional.
	CSS ID Selector - Another input's id ('#input_id')	Compare with Another Input Checks if the value is equal to that of another input element. Optional. The ID of the source input should be supplied as a CSS selector i.e. data-val-checkAgainst="#id".
	Array - An array: ['apple', 'pear', 'orange']	Compare with An Array Checks if the value matches one of the array items supplied in the attribute. Optional. It should be supplied as follows: data-val-checkAgainst="['apple', 'pear', 'orange']".
	'exp: == N' - (N = number) 'exp: != N' - (N = number) 'exp: > N' - (N = number) 'exp: < N' - (N = number) 'exp: >= N' - (N = number) 'exp: <= N' - (N = number) 'exp: {N1 && N2}' - (N = number). Between N1 and N2.	Numeric Operators Checks if the value matches against numeric expressions. Optional. To be supplied as follows: data-val-checkAgainst="exp: == 10".
	'exp: == S' - (S = string) 'exp: != NS' - (S = string) 'exp: ^= S' - (S = string). Start with 'exp: ^i= S' - (S = string). Starts with - case insensitive 'exp: $= S' - (S = string). Ends with 'exp: $i= S' - (S = string). Ends with - case insensitive 'exp: = S' - (S = string). Contains 'exp: i= S' - (S = string). Contains - case insensitive	String Operators Checks if the value matches against string expressions. Optional. To be supplied as follows: data-val-checkAgainst="exp: == United States".
	'date: == D' - (D = date) 'date: != D' - (D = date) 'date: > D' - (D = date) 'date: < D' - (D = date) 'date: >= D' - (D = date) 'date: <= D' - (D = date) 'date: {D1 && D2}' - (D = date). Between D1 and D2.	Date Operators Checks if the value matches against date expressions. Optional. To be supplied as follows: data-val-checkAgainst="date: == 01/22/2012".
data-val-ignore	'1' - True '0' - False	Internal Use Only Internal use only. Please do not use this attribute manually. Ignores the element as a required element.
data-val-init	'1' - True '0' - False	Internal Use Only Internal use only. Please do not use this attribute manually. Marks the element as validation being initiated for.
data-val-custom-error	String	Internal Use Only Internal use only. Please do not use this attribute manually. Attaches a custom error message, overriding data-val-error-text
data-val-delay	n	Internal Use Only Internal use only. Please do not use this attribute manually. A JavaScript timer for delayed initiation check of the input element after the user stops typing.

Force Format Attribute

Following attributes are not directly related to the validation tool. However, they are helpful utilities:

Attribute	Values	Description
data-forceFormat=""	'int' Force Integer value only 'neg-int' Force negative Integer value only 'float' Force Float value only 'neg-float' Force negative Float value only 'alphanumeric' Force letters and numbers only 'username' Force username characters only 'password' Force password only	Force Data Type Applying this attribute with the above options will force the input field to acept only the specified type of characters. This can be applied to an input whether or not it is a required field or has other 'data-val-' attributes.

Example:

<input type="text" name="int" data-forceFormat="int" />
<input type="text" name="neg-int"  data-forceFormat="neg-int" />
<input type="text" name="float"  data-forceFormat="float" />
<input type="text" name="neg-float"  data-forceFormat="neg-float" />
<input type="text" name="alpha"  data-forceFormat="alphanumeric" />
<input type="text" name="username"  data-forceFormat="username"  />
<input type="text" name="password"  data-forceFormat="password"  />

Message Bubble Attribute

The message bubble that shows up when there is a validation error for an input field can be displayed to show messages in other scenarios as well outside of validation. Use the following attributes in any HTML element (not just forms) to attach the bubble message module to an element:

Attribute	Values	Description
data-bubble-title=""	'String' The title of the bubble	Bubble Title Sets the title for the bubble message for a specific HTML element.
data-bubble-text=""	'String' The message for the bubble	Bubble Message Sets the message text for the bubble for a specific HTML element.

In addition, use the following JavaScript syntax to attach the bubble module to the specified element.

@param:options - The option object to be passed to the infoBubble plug-in It has the following object keys:

showEvent - Specify the event for showing the bubble for the element i.e. 'mouseover', 'mouseenter', 'click', 'focus', etc.
hideEvent - Specify the event for hiding the bubble for the element i.e. 'mouseout', 'mouseleave', 'focus', etc.

<a href="http://domain.com" class="bubble_example" data-bubble-title="Bubble Example" 
	data-bubble-text="This is an example of the message bubble in action">Bubble Example</a>

<script>
	var options = {
		showEvent: 'mouseenter',
		hideEvent: 'mouseleave'
	}
	$('a.bubble_example').infoBubble(options);
</script>

HTML Attributes for Controls

Validation Attributes

REQUIRED Field

Error Bubble Title

Error Bubble Text

Minimum Length

Data type

Number Formats

Alphanumeric Formats

Phone Formats

Date Formats

Time Formats

Compare with a String

Compare with Another Input

Compare with An Array

Numeric Operators

String Operators

Date Operators

Internal Use Only

Internal Use Only

Internal Use Only

Internal Use Only

Force Format Attribute

Force Data Type

Message Bubble Attribute

Bubble Title

Bubble Message