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.
<input type="text" name="Name" class="quickValidate" data-validate="required,number,range=0-99" />
<script type="text/javascript"> $('form').quickValidate(); </script>
<input type="text" name="Name" class="quickValidate" data-validate="required" />
<input type="text" name="Name" class="quickValidate" data-validate="maxlength=140" />
<input type="text" name="Name" class="quickValidate" data-validate="minlength=3" />
<input type="text" name="Name" class="quickValidate" data-validate="number" />
<input type="text" name="Name" class="quickValidate" data-validate="integer" />
<input type="text" name="Name" class="quickValidate" data-validate="range=1-10" />
<input type="text" name="Name" class="quickValidate" data-validate="email" />
<input type="text" name="Name" class="quickValidate" data-validate="required" />
<input type="text" name="Name" class="quickValidate" data-validate="expression=/^\d+$/" />
class | Class of inputs being validated, default: .quickValidate |
notificationClass | Class of notification popup default: .notification |
errorClass | Class of error text in notification default: .error |
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:
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!