Something went wrong

Okay

quickValidation.js jQuery form validation that makes sense
Written by Nik Korablin, @nikorablin

Demo

  • Just a required field
  • A required field, with a range of 1-99
  • A required field, must be a valid email
  • Not required, must be a valid phone number
  • Not required, must be a valid number, can be an integer or a float
  • Not required, must be a valid integer
  • Not required, must be at least 3 characters
  • Not required, must be no more than 5 characters
  • Not required, must match custom regular expression /^\d+$/
  • 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

classClass of inputs being validated, default: .quickValidate
notificationClassClass of notification popup default: .notification
errorClassClass 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:

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!