Demo

• Name: *Just a required field
• Range: *A required field, with a range of 1-99
• Email: *A required field, must be a valid email
• Phone:Not required, must be a valid phone number
• Number:Not required, must be a valid number, can be an integer or a float
• Integer:Not required, must be a valid integer
• Min Length:Not required, must be at least 3 characters
• Max Length:Not required, must be no more than 5 characters
• Expression:Not required, must match custom regular expression /^\d+$/
• Textarea:Not required, maximum length of 140 characters

Usage

quickValidation.js works in a way I think makes sense. Instead of defining rules in the Javascript, I assign them right in the input itself.

Using a data-validate attribute in the input tag, you can string together rules like this required,number,range=0-99, then add the .quickValidate class, add a data-name attribute to name your field for errors, and you're done.

HTML

<input type="text" name="Name" class="quickValidate" data-validate="required,number,range=0-99" />

Javascript Call

<script type="text/javascript">
	$('form').quickValidate();
</script>

Required Field

<input type="text" name="Name" class="quickValidate" data-validate="required" />

Max Length

<input type="text" name="Name" class="quickValidate" data-validate="maxlength=140" />

Minimum Length

<input type="text" name="Name" class="quickValidate" data-validate="minlength=3" />

Number

<input type="text" name="Name" class="quickValidate" data-validate="number" />

Integer

<input type="text" name="Name" class="quickValidate" data-validate="integer" />

Range

<input type="text" name="Name" class="quickValidate" data-validate="range=1-10" />

Email

<input type="text" name="Name" class="quickValidate" data-validate="email" />

Phone

<input type="text" name="Name" class="quickValidate" data-validate="required" />

Regular Expression Match

<input type="text" name="Name" class="quickValidate" data-validate="expression=/^\d+$/" />

Options

class	Class of inputs being validated, default: .quickValidate
notificationClass	Class of notification popup default: .notification
errorClass	Class of error text in notification default: .error

Custom Errors

You can also have custom error text with this plugin. All you need to do is set the option when calling the quickValidate() function like this:

<script type="text/javascript">
	$('form').quickValidate({
		'errorRequired' : '$name is a required field'
	});
</script>

Use $name to signify when the name of a field is to be used. Use $value when the value of that rule is to be used, and use $min and $max for the minimum and maximum values in ranges.

Here are the errors you can customize:

• errorRequired
• errorMaxlengtn
• errorMinlength
• errorNumber
• errorInteger
• errorRange
• errorEmail
• errorPhone
• errorExpression

License

As always, this plugin is free to use however you like. A link back or a tweet mentioning the plugin is always nice, but not required. Enjoy!

• GitHub
• nikorablin.com
• @nikorablin