verifiable

#Shape Validation http://twitter.com/madebyshape

##Description

Very easy to use & simple form validation plugin built on jQuery. With Email, Password & Field Type validation included. It can also validate multiple forms on one page.

##Usage

Note: This requires jQuery 1.10.x to work correctly. This is not included in the repo but can be downloaded from http://jquery.com or from a Google CDN - https://developers.google.com/speed/libraries/#jquery

###Installing

<form class="shape-validate">
	<label>Full Name *</label>
	<input type="text" name="full_name" class="validate-required">
</form>

<script>
	$(document).ready(function(){
		$('.form-validate').shapeValidate();
	});
</script>

(See "demo.html" if you need to see a live example)

##Options

####Example

	<script>
		$(document).ready(function(){
			$('.form-validate').shapeValidate({
				debug: true,
				selectors: {
					required: 'this-is-required'
				},
				alerts: {
					required: 'You missed this one out!',
					email: 'Uh oh, invalid email address!'
				}
			});
		});
	</script>

General

<script>
	$(document).ready(function(){
		$('.form-validate')
			.shapeValidate(
				{
					selectors: {
						required: 'required'
					}
				}
			);
	});
</script>

Name	Type	Default Value	Description
debug	boolean	false	Shows errors within the form in the browsers javascript console.
disableSubmit	boolean	false	Stops the form from being submitted when the form is successfully complete. Good for debugging.
delay	integer	500	When the form is submitted and is invalid it will keep checking to see if any fields are valid. This value is the delay in milliseconds to check the form. Increase this if it causes browser lag.

Selectors

Mainly because I hate it when jQuery plugins don't let you customise the classes that get added to elements dynamically.

<script>
	$(document).ready(function(){
		$('.form-validate')
			.shapeValidate(
				{
					selectors: {
						required: 'required'
					}
				}
			);
	});
</script>

Name	Type	Default Value	Description
invalid	string	validate-invalid	Class added to the tag when the form has invalid fields.
valid	string	validate-valid	Class added to the tag when the form fields are all valid.
required	string	validate-required	Class that NEEDS to be added to any field that is required.
summary	string	validate-summary	Class added to the message that appears above the submit element. Alerting the user that there is errors in the form.
alert	string	validate-alert	Class added to the message that appears after the invalid field. Alerting the user that there is errors in the form.
submit	string	validate-submit	Class added any element to enable it to submit the form (See Advanced Usage > Submitting The Form)
submitting	string	validate-submitting	Class added to the element that was clicked to submit the form.
submitted	string	validate-submitted	Class added to the form when all fields are valid and the form is submitting.

Alerts

These are all the visible messages that appear throughout the validation process

<script>
	$(document).ready(function(){
		$('.form-validate')
			.shapeValidate(
				{
					alerts: {
						required: 'This is required'
					}
				}
			);
	});
</script>

Name	Type	Default Value	Description
required	string	Required	Appears after the invalid field.
summary	string	There are errors in the form, please review	Appears above the submit element.
submitting	string	Loading...	Added to the element that was clicked to submit the form.
password	string	Must be a minimum of 8 characters	Appears after the invalid password field.
passwordConfirm	string	Passwords do not match	Appears after the invalid password confirm field if it does't match the password field.
email	string	Must contain "@" and "." characters	Appears after the invalid email field if it doesn't contain a @ and a TLD e.g. .com, .co.uk etc.
number	string	Only numbers allowed	Appears after the invalid number field if it contains anything but a number.

Gateways

Some gateways require specific validation settings. If your using any gateways below, you may want to enable these settings

Example:

<script>
	$(document).ready(function(){
		$('.form-validate')
			.shapeValidate(
				{
					gateways: {
						stripe: true
					}
				}
			);
	});
</script>

Name	Type	Default Value	Description
stripe	boolean	false	Disables auto submit, so stripe can handle this function

##Advanced Usage

###Password Fields Soon

###Checkbox & Radio Fields Soon

###Subbmiting The Form Soon

##Roadmap

• Option to turn summary messages off
• Option to set password minimum length