Example:

jQuery("input:blank").length

HTML:

<input value="" /><input value="  " /><input value="abc" />

Result:

2

Example:

jQuery("input:filled").length

HTML:

<input value="" /><input value="  " /><input value="abc" />

Result:

1

Example:

Creates an Accordion from the given definition list

jQuery('#nav').Accordion();

HTML:

<dl id="nav">
  <dt>Header 1</dt>
  <dd>Content 1</dd>
  <dt>Header 2</dt>
  <dd>Content 2</dd>
</dl>

Example:

Creates an Accordion from the given div structure

jQuery('#nav').Accordion({
  header: 'div.title'
});

HTML:

<div id="nav">
 <div>
   <div class="title">Header 1</div>
   <div>Content 1</div>
 </div>
 <div>
   <div class="title">Header 2</div>
   <div>Content 2</div>
 </div>
</div>

Example:

Creates an Accordion from the given navigation list, cloning the header element to produce a clickable link. The class as specified in the header selector is removed from the cloned element. Currently this works only with the above structure, the header must be an anchor followed by a list.

jQuery('#nav').Accordion({
  header: '.head',
	 cloneFirst: true
});

HTML:

<ul id="nav">
  <li>
    <a class="head" href="books/">Books</a>
    <ul>
      <li><a href="books/fantasy/">Fantasy</a></li>
      <li><a href="books/programming/">Programming</a></li>
    </ul>
  </li>
  <li>
    <a class="head" href="movies/">Movies</a>
    <ul>
      <li><a href="movies/fantasy/">Fantasy</a></li>
      <li><a href="movies/programming/">Programming</a></li>
    </ul>
  </li>
</ul>

Example:

Updates the element with id status with the text of the selected header every time the accordion changes

jQuery('#accordion').Accordion().change(function(event, newHeader, oldHeader, newContent, oldContent) {
  jQuery('#status').html(newHeader.text());
});

Example:

Activate the second content of the Accordion contained in <div id="accordion">.

jQuery('#accordion').activate(1);

Example:

Activate the first element matching the given expression.

jQuery('#accordion').activate("a:first");

Example:

Close all content parts of the accordion.

jQuery('#nav').activate();

Example:

Autocomplete a text-input with remote data. For small to giant datasets. When the user starts typing, a request is send to the specified backend ("my_autocomplete_backend.php"), with a GET parameter named q that contains the current value of the input box and a paremeter "limit" with the value specified for the max option. A value of "foo" would result in this request url: my_autocomplete_backend.php?q=foo&limit=10 The result must return with one value on each line. The result is presented in the order the backend sends it.

$("#input_box").autocomplete("my_autocomplete_backend.php");

HTML:

<input id="input_box" />

Example:

Autcomplete a text-input with local data. For small datasets.

$("#input_box").autocomplete(["Cologne", "Berlin", "Munich"]);

HTML:

<input id="input_box" />

Example:

Autcomplete a text-input with data received via AJAX. For small to medium sized datasets.

$.getJSON("my_backend.php", function(data) {
  $("#input_box").autocomplete(data);
});

HTML:

<input id="input_box" />

Example:

Autcomplete a textarea with local data (for small datasets). Once the user chooses one value, a separator is appended (by default a comma, see multipleSeparator option) and more values are autocompleted.

$("#mytextarea").autocomplete(["Cologne", "Berlin", "Munich"], {
 multiple: true
});

HTML:

<textarea id="mytextarea" />

Example:

jQuery('input#suggest').flushCache();

Example:

Basic usage example

jQuery("div").html("Hi <strong>%</strong> in the year %?", name, new Date().getYear() + 1900);

Result:

[ <div>Hi <strong>Peter</strong> in the year 2007?</div> ]

Example:

Escaping of placeholder

jQuery("div").html("% %% done.", 56);

Result:

[ <div>56 % done.</div> ]

Example:

jQuery.Accordion.setDefaults({
	showSpeed: 1000,
	hideSpeed: 150
});

Example:

Adds a method that checks if the value starts with http://mycorporatedomain.com

jQuery.validator.addMethod("domain", function(value) {
  return /^http://mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");

Example:

jQuery.validator.addMethod("math", function(value, element, params) {
 return value == params[0] + params[1];
}, "Please enter the correct value for this simple question.");

Example:

Declares an optional file input element whose value must ends with '.png', '.jpg', '.jpeg' or '.gif'.

<input type="file" name="avatar" class="{accept:true}" />

Example:

Declares an optional file input element whose value must ends with '.txt' or '.doc' or '.docx'.

<input type="file" name="avatar" class="{accept:'txt|docx?'}" />

Example:

Declares an optional input element whose value must be a valid date (or none at all).

<input name="birthdate" class="{date:true}" />

Example:

Declares an input element whose value must be a valid date.

<input name="birthdate" class="{required:true,date:true}" />

Example:

jQuery.validator.methods.date("1990/01/01")

Result:

true

Example:

jQuery.validator.methods.date("1990-01-01")

Result:

true

Example:

jQuery.validator.methods.date("01.01.1990")

Result:

false

Example:

Declares an optional input element whose value must be a valid ISO date (or none at all).

<input name="birthdate" class="{dateISO:true}" />

Example:

jQuery.validator.methods.date("1990/01/01")

Result:

false

Example:

jQuery.validator.methods.date("01.01.1990")

Result:

true

Example:

jQuery.validator.methods.date("0.1.2345")

Result:

true

Example:

Declares an optional input element whose value must be a valid german date (or none at all).

<input name="geburtstag" class="{dateDE:true}" />

Example:

Declares an optional input element whose value must contain only digits (or none at all).

<input name="serialnumber" class="{digits:true}" />

Example:

Declares two input elements: The first must contain a valid email address, the second must contain the same adress, enter once more. The paramter is a expression used via jQuery to select the element.

<input name="email" id="email" class="{required:true,email:true'}" />
<input name="emailAgain" class="{equalTo:'#email'}" />

Example:

Declares an optional input element whose value must be a valid email address (or none at all).

<input name="email1" class="{email:true}" />

Example:

Declares an input element whose value must be a valid email address.

<input name="email1" class="{required:true,email:true}" />

Example:

Declares an input element with at most 5 characters.

<input name="firstname" class="{maxLength:5}" />

Example:

Declares an input element that must have at least one and at most 5 characters.

<input name="firstname" class="{required:true,maxLength:5}" />

Example:

Declares an optional input element whose value must be at most 16 (or none at all).

<input name="age" class="{maxValue:16}" />

Example:

Declares an input element whose required value must be at most 16.

<input name="age" class="{required:true,maxValue:16}" />

Example:

Declares an optional input element with at least 5 characters (or none at all).

<input name="firstname" class="{minLength:5}" />

Example:

Declares an input element that must have at least 5 characters.

<input name="firstname" class="{required:true,minLength:5}" />

Example:

Specifies a group of checkboxes. To validate, at least two checkboxes must be selected.

<fieldset>
	<legend>Spam</legend>
	<label for="spam_email">
		<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true,minLength:2" />
		Spam via E-Mail
	</label>
	<label for="spam_phone">
		<input type="checkbox" id="spam_phone" value="phone" name="spam" />
		Spam via Phone
	</label>
	<label for="spam_mail">
		<input type="checkbox" id="spam_mail" value="mail" name="spam" />
		Spam via Mail
	</label>
	<label for="spam" class="error">Please select at least two types of spam.</label>
</fieldset>

Example:

Declares an optional input element whose value must be at least 16 (or none at all).

<input name="age" class="{minValue:16}" />

Example:

Declares an input element whose value must be at least 16.

<input name="age" class="{required:true,minValue:16}" />

Example:

Declares an optional input element whose value must be a valid number (or none at all).

<input name="amount" class="{number:true}" />

Example:

Declares an optional input element whose value must be a valid german number (or none at all).

<input name="menge" class="{numberDE:true}" />

Example:

Declares an optional input element with at least 3 and at most 5 characters (or none at all).

<input name="firstname" class="{rangeLength:[3,5]}" />

Example:

Declares an input element that must have at least 3 and at most 5 characters.

<input name="firstname" class="{required:true,rangeLength:[3,5]}" />

Example:

Specifies a select that must have at least two but no more then three options selected.

<select id="cars" class="{required:true,rangeLength:[2,3]}" multiple="multiple">
	<option value="m_sl">Mercedes SL</option>
	<option value="o_c">Opel Corsa</option>
	<option value="vw_p">VW Polo</option>
	<option value="t_s">Titanic Skoda</option>
</select>

Example:

Declares an optional input element whose value must be at least 4 and at most 12 (or none at all).

<input name="age" class="{rangeValue:[4,12]}" />

Example:

Declares an input element whose required value must be at least 4 and at most 12.

<input name="age" class="{required:true,rangeValue:[4,12]}" />

Example:

Declares an input element that is required.

<input name="firstname" class="{required:true}" />

Example:

Declares an input element required, but only if a radio button with id "other" is checked. In other words: As long the "#other" isn't checked, the details field is valid.

<input id="other" type="radio" />
<input name="details" class="{required:'#other:checked'}" />

Example:

Declares an input element "details", required, but only if two other fields are checked.

jQuery("#myform").validate({
	rules: {
		details: {
			required: function(element) {
				return jQuery("#other").is(":checked") && jQuery("#other2").is(":checked");
			}
		}
	}
});

HTML:

<form id="myform">
	<input id="other" type="checkbox" />
	<input id="other2" type="checkbox" />
	<input name="details" />
</form>

Example:

Specifies a group of radio elements. The validation rule is specified only for the first element of the group.

<fieldset>
	<legend>Family</legend>
	<label for="family_single">
		<input  type="radio" id="family_single" value="s" name="family" validate="required:true" />
		Single
	</label>
	<label for="family_married">
		<input  type="radio" id="family_married" value="m" name="family" />
		Married
	</label>
	<label for="family_divorced">
		<input  type="radio" id="family_divorced" value="d" name="family" />
		Divorced
	</label>
	<label for="family" class="error">Please select your family status.</label>
</fieldset>

Example:

Declares an optional input element whose value must be a valid URL (or none at all).

<input name="homepage" class="{url:true}" />

Example:

Declares an input element whose value must be a valid URL.

<input name="homepage" class="{required:true,url:true}" />

Example:

Triggers validation on a single element programmatically.

$("#myform").validate().element( "#myselect" );

Example:

Triggers form validation programmatcitally.

$("#myform").validate().form();

Example:

Reset the form controlled by this validator.

var validator = $("#myform").validate();
validator.resetForm();

Example:

Adds and shows error message programmatically.

var validator = $("#myform").validate();
validator.showErrors({"firstname": "I know that your firstname is Pete, Pete!"});

Example:

Sets the debug setting for all validation calls following.

jQuery.validator.setDefaults({
	debug: true
);

Example:

Reads metadata from the class attribute

<p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>

HTML:

$.meta.setType("class")

Example:

Reads metadata from a "data" attribute

<p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>

HTML:

$.meta.setType("attr", "data")

Example:

Reads metadata from a nested script element

<p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>

HTML:

$.meta.setType("elem", "script")

Example:

Bind a handler to the result event to display the selected value in a #result element. The first argument is a generic event object, in this case with type "result". The second argument refers to the selected data, which can be a plain string value or an array or object. The third argument is the formatted value that is inserted into the input field.

jQuery('input#suggest').result(function(event, data, formatted) {
  jQuery("#result").html( !data ? "No match!" : "Selected: " + formatted);
});

Example:

Triggers a search event.

jQuery('input#suggest').search();

Example:

Changes the maximum number of items to display to 15.

jQuery('input#suggest').setOptions({
 max: 15
});

Example:

Basic usage example

jQuery("div").text("Hi <strong>%</strong> in the year %?", "Peter", new Date().getYear() + 1900);

Result:

[ <div>Hi &lt;strong&gt;Peter&lt;/strong&gt; in the year 2007?</div> ]

Example:

Escaping of placeholder

jQuery("div").text("% %% done.", 56);

Result:

[ <div>56 % done.</div> ]

Example:

Shows tooltips for anchors, inputs and images, if they have a title

$('a, input, img').Tooltip();

Example:

Shows tooltips for labels with no delay, tracking mousemovement, displaying the tooltip when the label is clicked.

$('label').Tooltip({
  delay: 0,
  track: true,
  event: "click"
});

Example:

This example starts with modifying the global settings, applying them to all following Tooltips; Afterwards, Tooltips for anchors with class pretty are created with an extra class for the Tooltip: "fancy" for anchors, "fancy-img" for images

// modify global settings
$.extend($.fn.Tooltip.defaults, {
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
 fixPNG: true
});
// setup fancy tooltips
$('a.pretty').Tooltip({
	 extraClass: "fancy"
});
 $('img.pretty').Tooltip({
	 extraClass: "fancy-img",
});

Example:

The following styles are necessary in your stylesheet. There is are alternative sets of images available.

.treeview, .treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}	

.treeview li { 
	margin: 0;
	padding: 4px 0 3px 20px;
}

.treeview li { background: url(images/tv-item.gif) 0 0 no-repeat; }
.treeview .collapsable { background-image: url(images/tv-collapsable.gif); }
.treeview .expandable { background-image: url(images/tv-expandable.gif); }
.treeview .last { background-image: url(images/tv-item-last.gif); }
.treeview .lastCollapsable { background-image: url(images/tv-collapsable-last.gif); }
.treeview .lastExpandable { background-image: url(images/tv-expandable-last.gif); }

Example:

Basic usage example

$("ul").Treeview();

HTML:

<ul>
  <li>Item 1
    <ul>
      <li>Item 1.1</li>
    </ul>
  </li>
  <li class="closed">Item 2 (starts closed)
    <ul>
      <li>Item 2.1
        <ul>
          <li>Item 2.1.1</li>
          <li>Item 2.1.2</li>
        </ul>
      </li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Example:

Create a treeview that starts collapsed. Toggling branches is animated.

$("ul").Treeview({ speed: "fast", collapsed: true});

HTML:

<ul>
  <li class="open">Item 1 (starts open)
    <ul>
      <li>Item 1.1</li>
    </ul>
  </li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
</ul>

Example:

Creates a treeview that can be controlled with a few links. Very likely to be changed/improved in future versions.

$("ul").Treeview({ control: #treecontrol });

HTML:

<div id="treecontrol">
  <a href="#">Collapse All</a>
  <a href="#">Expand All</a>
  <a href="#">Toggle All</a>
</div>

Example:

Validates a form on submit. Rules are read from metadata.

$("#myform").validate();

HTML:

<form id="myform">
  <input name="firstname" class="{required:true}" />
</form>

Example:

Validates all input elements on blur event (when the element looses focus). Deactivates focus of invalid elements.

$("input").validate({
		focusInvalid: false,
		event: "blur"
});

Example:

Uses form plugin's ajaxSubmit method to handle the form submit, while preventing the default submit.

$("#myform").validate({
  submitHandler: function(form) {
  	$(form).ajaxSubmit();
  }
});

Example:

Validate a form on submit and each element on keyup. Rules are specified for three elements, and a message is customized for the "password" and the "age" elements. Inline rules are ignored. The password is only required when the age is lower then 18. The age is only required when the firstname is blank.

$("#myform").validate({
 event: "keyup"
	rules: {
		firstname: { required: true },
		age: {
			required: "#firstname:blank",
			number: true,
			minValue: 3
		},
		password: {
			required: function() {
				return $("#age").val() < 18;
			},
			minLength: 5,
			maxLength: 32
		}
	},
 messages {
		password: {
			required: "Your password is required because you are not yet 18 years or older."
			minLength: "Please enter a password at least 5 characters long.",
			maxLength: "Please enter a password no longer then 32 characters long."
		},
		age: "Please specify your age as a number (at least 3)."
	}
});

Example:

Validates a form on submit. The class used to search, create and display error labels is changed to "invalid". This is also added to invalid elements. All error labels are displayed inside an unordered list with the ID "messageBox", as specified by the jQuery object passed as errorContainer option. All error elements are wrapped inside an li element, to create a list of messages. To ease the setup of the form, debug option is set to true, preventing a submit of the form no matter of being valid or not.

$("#myform").validate({
  errorClass: "invalid",
  errorLabelContainer: $("#messageBox"),
  wrapper: "li"
});

HTML:

<ul id="messageBox"></ul>
<form id="myform" action="/login" method="post">
  <label>Firstname</label>
  <input name="fname" class="{required:true}" />
  <label>Lastname</label>
  <input name="lname" title="Your lastname, please!" class="{required:true}" />
</form>

Result:

<ul id="messageBox">
  <li><label for="fname" class="invalid">Please specify your firstname!</label></li>
  <li><label for="lname" class="invalid">Your lastname, please!</label></li>
</ul>
<form id="myform" action="/login" method="post">
  <label>Firstname</label>
  <input name="fname" class="{required:true} invalid" />
  <label>Lastname</label>
  <input name="lname" title="Your lastname, please!" class="{required:true} invalid" />
</form>

Example:

Validates a form on submit. Customizes the placement of the generated labels by appending them to the next table cell.

$("#myform").validate({
	errorPlacement: function(error, element) {
		error.appendTo( element.parent("td").next("td") );
	}
});

HTML:

<form id="myform" action="/login" method="post">
	<table>
		<tr>
			<td><label>Firstname</label>
			<td><input name="fname" class="{required:true}" /></td>
			<td></td>
		</tr>
		<tr>
			<td><label>Lastname</label></td>
			<td><input name="lname" title="Your lastname, please!" class="{required:true}" /></td>
			<td></td>
		</tr>
	</table>
</form>

Result:

<form id="myform" action="/login" method="post">
	<table>
		<tr>
			<td><label>Firstname</label>
			<td><input name="fname" class="{required:true}" /></td>
			<td><label for="fname" class="invalid">Please specify your firstname!</label></td>
		</tr>
		<tr>
			<td><label>Lastname</label></td>
			<td><input name="lname" title="Your lastname, please!" class="{required:true}" /></td>
			<td><label for="lname" class="invalid">Your lastname, please!</label></td>
		</tr>
	</table>
</form>

Example:

Validates a form on submit. Similar to the above example, but with an additional container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option).

$("#myform").validate({
  errorContainer: $("#messageBox1, #messageBox2"),
  errorLabelContainer: $("#messageBox1 ul"),
  wrapper: "li",
});

HTML:

<div id="messageBox1">
  <h3>The are errors in your form!</h3>
  <ul></ul>
</div>
<form id="myform" action="/login" method="post">
  <label>Firstname</label>
  <input name="fname" class="{required:true}" />
  <label>Lastname</label>
  <input name="lname" title="Your lastname, please!" class="{required:true}" />
</form>
<div id="messageBox2">
  <h3>The are errors in your form, see details above!</h3>
</div>

Result:

<ul id="messageBox">
  <li><label for="fname" class="error">Please specify your firstname!</label></li>
  <li><label for="lname" class="error">Your lastname, please!</label></li>
</ul>
<form id="myform" action="/login" method="post">
  <label>Firstname</label>
  <input name="fname" class="{required:true} error" />
  <label>Lastname</label>
  <input name="lname" title="Your lastname, please!" class="{required:true} error" />
</form>