validator

A jquery validator plugin for bootstrap based forms

Core Methods

Below you will find the list of methods that the library contains. They are made to follow exactly what you would like the validator script to do, such as set and check, and other initialization methods:

validator(options) : the initial function that sets all your controls
validator.check() : checks the form that the validator is attached to
validator.setCCImage(options) : initializes the credit card images for the credit cart number validations

$.validator

This is a demonstration on how to the initial function .validator

Other features that come along with the initialization is the ability for the form to validate on keyup, change, select, focus, and click


	/**
	* validator.js attaches itself to a single form element
	* For this example our form has the id of 'testForm'
	*/
	$('#testForm').validator({
		/* here is where you would insert your options */
	});

$.validator Options

Name Type Description

notEmpty Array Forces the designated inputs to have a value when the form is validated

required Array *See 'notEmpty'

isEmail Array Forces the designated inputs to be a valid e-mail address

isPhoneNumber Array Forces the designated inputs to be a valid phone number. It will check for a phone number with and without the country code

isNumber Array Forces the designated inputs to be valid integer or floating point numbers

isSSN Array Forces the designated inputs to be valid social security numbers

isString Array Forces the designated inputs to be a valid string

isURL Array Forces the designated inputs to be a valid web address

isDateTime

Mixed
Array/Mixed Array/Object

Usage

Validates the given input as a dateTime. Below are examples of the three different ways you can passed the information to the isDateTime function:


// as just an array, note that if it is passed as an array a default pattern of 'm/d/Y' exists
isDateTime : ['selector1', 'selector2']
// as a mixed array
isDateTime : [
'selector1',
['selector2', 'm-d-Y h:s']
]
// as an object
isDateTime : {
'selector1' : 'm-d-Y h:s',
'selector2' : 'm/d/Y'
}

Pattern Options

Familiarity with the date constants for the date() function in PHP will help with this, as this is where the pattern concept is derived from. The following table below has all the accepted constants and what they represent:

		</table>
	</td>
</tr>
<tr>
	<td>groupNotEmpty</td>
	<td>Array</td>
	<td>Each selector in the array is a selector for a group of radio buttons and/or check boxes. It will check to see if at least one of them is filled in. Adding this function makes it a require field</td>
</tr>
<tr>
	<td>isRoutingNumber</td>
	<td>Array</td>
	<td>Forces the values for each selector to be a valid routing number</td>
</tr>
<tr>
	<td>isMacAddress</td>
	<td>Array</td>
	<td>Forces the values for each selector to be a valid Mac Address</td>
</tr>
<tr>
	<td>isIPAddress</td>
	<td>Array</td>
	<td>Forces the values for each selector to be a valid IP Address</td>
</tr>
<tr>
	<td>validPassword</td>
	<td>Array</td>
	<td>
		Forces the values to be a valid password based on the given strength parameters for the function.
		Below is a table that will go over the different requirements and strength value for each password check:
		<table class='table table-striped table-condensed'>
			<tr><th>Requirement</th><th>Strength</th></tr>
			<tr><td>Is a password of at least 8 characters</td><td>40</td></tr>
			<tr><td>is at least 12 characters long</td><td>10</td></tr>
			<tr><td>Is at least 16 characters long</td><td>10</td></tr>
			<tr><td>Contains at least 1 lower case letter</td><td>10</td></tr>
			<tr><td>Contains at least 1 upper case letter</td><td>10</td></tr>
			<tr><td>Contains at least 1 number</td><td>10</td></tr>
			<tr><td>Contains at least 1 of these symbols <code>! $ @ #</code></td><td>10</td></tr>
		</table>
		The password will validate at strength <strong>60</strong> or higher
	</td>
</tr>
<tr>
	<td>equalTo</td>
	<td>Object</td>
	<td>
	Takes a list of key value pairs where the key is the selector this function is attached to and the value 
	is the selector that it is being compared to.

	<h4>Example</h4>


/**
* '#selector' is the active input being compared
* '#comparingTo' is the input that '#selector' is being compared to
*/
equalTo : {
'#selector' : '#comparingTo'
}

	</td>
</tr>
<tr>
	<td>isCreditCard</td>
	<td>Array</td>
	<td>Forces the inputs to be a valid credit card number</td>
</tr>
<tr>
	<td>isZipCode</td>
	<td>Array</td>
	<td>Forces the inputs to be a valid zip code. Will validate in the <code>12345</code> form and <code>12345-6789</code> form</td>
</tr>
<tr>
	<td>isDependent</td>
	<td>Object<br></td>
	<td>Forces a pair or group of inputs to be dependent on eachother based on a selector set.
		<h4>Usage</h4>
		<p>
			You can pass, as the dependent selector, either a classname or a string preceeded by an underscore '_'. 
			If you pass an underscore selector the function will only search out the elements based on their data-validator attribute.
		</p>


/** 
* pass an object of selectors and targets
*/	
isDependent : {
'#selector1' : '_group',
'#selector2' : '_group',
'#selector3' : '.class'
}

		<p>
			As you can see in the above example <code>#selector1</code> and <code>#selector2</code> are dependent on eachother while <code>#selector3</code> is
			dependent on <code>.class</code>
		</p>
	</td>
</tr>
<tr>
	<td>testRegex</td>
	<td>Object</td>
	<td>
		Checks the input against a regex.
		<h4>Usage</h4>


/**
* pass the regex pattern as a string options
*/
testRegex : {
'#selector' : '/pattern/'
}

	</td>
</tr>

Constant	Description
d	day of the month with leading zeroes
j	day of the month no leading zeroes
D	day of the week as 3-letter abbreviation
l (lowercase "L")	full textual day of the week
F	full textual representation of the month
M	month as a 3-letter abbreviation
m	two digit month with leading zeros
n	two digit month with no leading zeros
Y	four digit year
y	two digit year
g	12-hour format no leading zeros
G	24-hour format no leading zeros
h	12-hour format with leading zeros
H	24-hour format with leading zeros
i	minutes with leading zeros
s	seconds with leading zeros
a/A/p/P	am/AM/pm/PM
`"/"`, `":"`, `" "`, `"-"`, `","`, `"."`	Forward slash, colon, space, hyphen, comma, and period are all the recognized non word characters for a datetime pattern

$.validator.check()

.check() is the final check for your form before attempting any further action with it. .check() returns a boolean of true or false.

Usage


/**
* simply call validator.check() to see if your form is valid
*/
$('#form').submit(function(e){
e.stopPropagation();
if($(this).validator.check()){
// process the form if the result is true
}else{
// throw out an error or handle how you want
}
})

$.validator.setCCImage()

.setCCImage() generates the credit card images for your credit card validation input

Remember to make sure you have the image directory that comes with this plugin located somewhere on your server

Options

Option	Type	Description
target	string	The id, class, or name that you wish to append this image set to.
path	string	The path to the image folder for the credit card images.

Example


/**
* simply call validator.check() to see if your form is valid
*/
$('#form').validator.setCCImage({
target : '#cc',
path : //path to image files
});

andrewschmidt-a/validator

validator

Core Methods

$.validator

$.validator Options

Usage

Pattern Options

$.validator.check()

Usage

$.validator.setCCImage()

Options

Example