Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

validation


h5Validate

Submitted by dilvie on October 3, 2010 - 1:47am

A jQuery plugin that understands HTML5 forms and knows how to validate them based on new input attributes such as "required" and "pattern", even in browsers that don't yet support HTML5.

In browsers that do support HTML5, h5Validate allows you to respond to validation failure, so that you can display helpful error messages to your users.

There are a ton of options you can override by passing key: value pairs when you call .h5Validate():

$(document).ready(function() {
$('#black').h5Validate({
errorClass:'black'
});
});

h5Validate on Github

jQueryLego

Submitted by a.karimzadeh on September 27, 2010 - 9:19am

This is a highly customizable jQuery Framework.

Including:

  • Utilities such as $(selector).toString(), $.isString()
  • Plugins such as window / popup window
  • Form Validation
  • Tabs
  • Bars
  • Templating System

You can merge all things together.

Sample:

var win = $('.panel').window().$();
win.open();

Instant Valdation

Submitted by effigydrums on September 21, 2010 - 1:04pm

Instant validation provides users with immediate form validation errors, correcting user input as soon as it’s entered rather than waiting for form submission. The appearance and position of the validation error messages are easily styled through CSS and plugin options. Currently available validation types include required fields, email addresses, phone numbers, zip codes, and numbers, but more will be added!

Formation - Form Generator Plugin

Submitted by mattnull on September 12, 2010 - 11:24am

Formation is a jQuery plugin that allows you to quickly create a form with validation without writing any HTML. You simply specify the container you wish to append the form to. By passing a few parameters into one of the formation function calls you can add different validation such as number, e-mail, url, phone number, or zip code. Each element that you create can be fully customized. You can set the class, id, or any other attribute that is native to that element. Enjoy!

validateMyForm

Submitted by andyshora on September 12, 2010 - 10:22am

validateMyForm is designed to provide easy-to-implement and attractive client-side validation for web forms.

v1.0 contained functionality such as required field, email address, numeric and conditional validation.

v1.1 contained date validation, and allows you to validate input as email, numeric or a date without marking the field as required - input will simply be validated if it is present. You can of course add 'required' and 'email' to an input, to make a required email address field.

v1.2 contained validation for checkboxes and radio buttons.

v1.3 contains validation for textareas, and also a character limit feature shown in example below.

v1.4 enables you to auto-hide textarea the character count when there is no input.

jQuery Easy Validation

Submitted by sohnee on September 10, 2010 - 1:34pm

The jQuery Easy Validation project is a plugin that adds some simple "mandatory field" validation to a form.

As well as preventing form submission in the event of an error, it will add a CSS class to indicate an error.

View a demonstration

Read the documentation

jFormVal

Submitted by alexandrezara on July 28, 2010 - 2:27pm

Welcome to jFormVal

JFormVal is jQuery Plugin for form validation.
It has been tested on all major browsers and works wonders!

Main features:

  • One line validation
  • Bundle for error messages
  • Auto change css style
  • Easy configuration

Short example

jQuery('#i01').valText('City').min(1).dif('Chicago').max(20);


This sample validates the element which id is 'i01'.
It is a 'text field' as the function 'valText' implies.
We gave it the name 'City', so it can have a nice error message, and set the following restrictions:

  • It must be at least 1 character in length (in other words: It has to be filled in)
  • Must be different from 'Chicago'
  • Can't have more than 20 characters

Check our Homepage




Form Validation With Hints

Submitted by icograma on July 6, 2010 - 2:05pm

Client-side form validation.

Instructions
1. Add jquery.form-validation-and-hints.js to your scripts directory and include it in the HTML which must also contain a version of the JQuery Library.
2. In jquery.form-validation-and-hints.js set the classprefix that you will use to link form elements in the HTML with validation rules in the JS (default is "verify").
3. Add the class "required" to wrap any field that should pass through a validation rule before submiting the form. Use any of the classes for predefined validation rules (verifyInteger, verifyURL, verifyMail) in the input inside the required wrapper.
4. Create your own validation rules in jquery.form-validation-and-hints.js declaring them inside the isTypeValidExt function.

Email

Form AutoValidate

Submitted by Phrogz on May 27, 2010 - 11:06am

Markup-based form validation. Supply a form with CSS class "autovalidate" and put some custom classes and attributes on the form elements, and it will automatically validate the form prior to submission. Other than including the library, no JS code at all is required by you!

  • Mark fields as "required".
  • Mark text fields for custom format validation (e.g. as integer, float, phone number, zip code, date, and more).
  • Enforce minlength, minvalue, maxvalue.
  • Ensure that a certain number of options are chosen (minchosen, maxchosen).
  • Provide nice names or custom error messages per field.
  • Fields and labels failing validation have a custom class applied, allow you to highlight them.

jQuery.Hashigo.js

Submitted by ptetau on May 24, 2010 - 7:13pm

jQuery.hashigo.js by Patrick Te Tau

Hashigo is spreadsheet style programming on the DOM.
Perfect for tasks like calculating values in a shopping basket, or writing validation.
- You program formulas which are JavaScript with selectors as values
DOM elements, e.g.
$('#a').calc('parseFloat(${#b})+parseFloat(${#c})');

- Selectors become values
- The result RECALCULATES with every change (a 'keyup' event), just like a spread sheet