Instantiate! Instant form validation.

Instantiate! is a jQuery plugin to instantly validate form inputs on a per-input basis. As soon as a user leaves an input, it is validated and error messages are presented right on the form. Then, while the user is correcting the input, it is validated with each keystroke until it is corrected.

All form controls are automatically validated on blur, if any are enabled for that input. There are several types of validation possible, checked starting with the simplest cases and moving to more complex cases. If an input fails a simple case, validation stops and does not evaluate more complicated cases. If all validation passes, a brief green flash indicates that the input has passed validation.

No Validation

<input type="text" class="full"
	placeholder="Just don't use the 'required' parameter!"
	>

This is Optional

Required Validation

Simply use the required attribute to force something, anything, to be entered. Modern browsers will do their own check onsubmit to make sure the field is filled, but our validate() function does it onblur.

<input type="text" class="full"
	placeholder="I can't be blank!"
	required>

This is Required

Pattern Validation

HTML5 introduced the pattern attribute. Put a regular expression as the value. It's ok to use patterns other people made or look up a specific regular expression. I usually test my regex patterns with rubular. Modern browsers will automatically make sure that the value meets the requirements of the pattern onsubmit. But again, we make use of it sooner, onblur.

Whenever you specify a pattern, you should provide a description of that pattern, so that users can know what the requirements are. To do this, simply add the attribute data-pattern-desc, and provide a description of the requirements that will be shown when they get it wrong. Be as exhaustive as you can in the description, yet terse.

<input type="text" class="full"
	placeholder="Enter username"
	required
	pattern="[a-zA-Z][a-zA-Z0-9-_\.]{7,}"
	data-pattern-desc="Must start with a letter, be a minimum of 8 characters. Only numbers and letters are allowed.">

Create a Username

Ajax Validation

For validation that is more complicated than meeting a regular expression, use Ajax validation. There are two steps.

Add the data-ajax-validate attribute, and for it's value, put the filename of the backend PHP script that you want to do the validating (e.g. put "username" for "ajax/username.php").
Now create a PHP script with the same name and put it inside the folder /ajax/. The script POST recieves the value of the field with the name "userInput", so you could do something like $_POST['userInput'] to get it. The script should return a JSON array containing the value passedValidation, which is true if it passed and false if it failed validation. You need to also include the value desc when it fails validation, which contains a description of the field requirements or a reason that it failed to validate. This will go in the error tip.

If the user has previously failed pattern or some other validation, the error tip will change when they move on to Ajax validation. See demo below for an example.

<input type="text" class="full"
	placeholder="Enter username"
	required
	pattern="[a-zA-Z][a-zA-Z0-9-_\.]{7,}"
	data-pattern-desc="Must start with a letter, be a minimum of 8 characters. Only numbers and letters are allowed."
	data-ajax-validate="username">

Create a Username

Running an Arbitrary Function

For cases where additional actions must be taken, or the validation requires interaction with other elements on the page, you can create a Javascript function to do anything you want. Use the attribute data-func, and specify the complete function call as the value. For example, if your function is named reType, enter: reType($elem, $('#password'));. See below for examples of existing functions.

reType()

Confirm that text in current element (first parameter, which is always "$elem") matches a specified element (second parameter.)

function reType($elem, $origElem) {
	//matches
	if($elem.val() == $origElem.val()){
		return true;
	//failed to match
	} else {
		$elem.addClass("error");
		$elem.attr("data-errMsg", "This field must match the specified field exactly.");
		return false;
	}
}

<input type="password" class="full"
	placeholder="Re-enter password"
	data-func="reType($elem, $('#password'));">

Choose a password

Re-enter password

emailCheck()

Use built-in browser email validation to check input value (only one parameter, which is always "$elem").

function emailCheck($elem) {
	if($elem[0].checkValidity()){
		return true;
	} else {
		$elem.addClass("error");
		$elem.attr("data-errMsg", "Must be a valid email address.");
		return false;
	}
}

<input type="email" class="full"
	placeholder="Enter Email"
	data-func="emailCheck($elem);">

Enter email address

duplicate()

Copy value (first parameter, which is always "$elem") to specified element (second parameter). Always returns true (not actually validating anything).

function duplicate($elem, $targetElem) {
	$targetElem.val($elem.val());
	return true;
}

<input type="text" class="full" id="address1" name="address1"
	placeholder="1234 Example Street"
	data-func="duplicate($elem, $('#billingAddress1'))">

Home Address

Billing Address

emailCheck()

Use built-in browser email validation to check input value (only one parameter, which is always "$elem").

function emailCheck($elem) {
	if($elem[0].checkValidity()){
		return true;
	} else {
		$elem.addClass("error");
		$elem.attr("data-errMsg", "Must be a valid email address.");
		return false;
	}
}

<input type="email" class="full"
	placeholder="Enter Email"
	data-func="emailCheck($elem);">

Enter email address

stripSpecial()

Remove non-digit characters from value to simplify validation in some cases (e.g. makes 123-45-678 into 12345678). Takes only one parameter, which is always "$elem". Always returns true (not actually validating anything).

function stripSpecial($elem) {
	$elem.val($elem.val().replace(/\D/,""));
	return true;
}

<input type="text" class="full" id="ssn" name="ssn"
	placeholder="Try putting some dashes or spaces."
	required
	data-func="stripSpecial($elem);"
	pattern="^(\d{3}-*?\d{2}-*?\d{4})$"
	data-pattern-desc="Must be a valid Social Security number, e.g. 555-55-5555.">

Social Security No.

All of the Above

A form can have any combination of validations--even all of them. The script is optimized so that it does not take any additional time to process a form with many types of validation.