jQuery Form Example Plugin

The following field should contain the example text "Simple example".

HTML

<input id="simple" type="text" />

JavaScript

$('#simple').example('Simple example');

The following field should contain the example text "Taken from the title" which is stored in its title attribute and set using a callback.

HTML

<input type="text" id="callback" title="Taken from the title" />

JavaScript

$('#callback').example(function() {
  return $(this).attr('title');
});

The following field should contain the example text "Taken from the title and pink" in pink as it uses both a callback and the className option.

HTML

<input type="text" id="callback_with_custom_class" title="Taken from the title and pink" />

JavaScript

$('#callback_with_custom_class').example(function() {
return $(this).attr('title');
}, {className: 'not_example'});

The following fields should all have examples set from their title attribute.

HTML

<input type="text" class="multiple_callback" title="Title 1" />
<input type="text" class="multiple_callback" title="Title 2" />
<input type="text" class="multiple_callback" title="Title 3" />

JavaScript

$('.multiple_callback').example(function() {
 return $(this).attr('title');
});

The following field should contain the example text "Type here..." in pink text.

HTML

<textarea id="content"></textarea>

JavaScript

$('#content').example('Type here...', {
  className: 'not_example'
});

The following fields should all contain the same example text of "Several at once."

HTML

<input type="text" class="multiple" />
<input type="text" class="multiple" />
<input type="text" class="multiple" />
<input type="text" class="multiple" />

JavaScript

$('.multiple').example('Several at once.');

The following field should have a value of "I already have a value" on page load but once cleared should have the example text of "This should not appear on page load."

HTML

<input id="prefilled" type="text" value="I already have a value" />

JavaScript

$('#prefilled').example('This should not appear on page load.');

The following field should contain the example text "Multiple class names".

HTML

<input id="multiple_classNames" type="text" class="something anything" />

JavaScript

$('#multiple_classNames').example('Multiple class names');

The following field should contain the example text "This is one thing" taken from its title attribute but after focusing on it once, the example should change to "Not anymore".

HTML

<input id="modifying_callback" title="This is one thing" type="text" />

JavaScript

$('#modifying_callback').example(function() {
var text = $(this).attr('title');
$(this).attr('title', 'Not anymore');
return text;
});

The following three fields should have values of "Not example by default" in pink text as they are all styled with the CSS class name "not_example" by changing the plugin defaults.

HTML

<input id="defaults_test_1" type="text" />
<input id="defaults_test_2" type="text" />
<input id="defaults_test_3" type="text" />

JavaScript

$.fn.example.defaults.className = 'not_example';
$('#defaults_test_1').example('Not example by default');
$('#defaults_test_2').example('Not example by default');
$('#defaults_test_3').example('Not example by default');

The following field should have its example set to "Metadata plugin rules" as defined by using the Metadata plugin.

HTML

<input id="metadata_1" class="{example: 'Metadata plugin rules'}" />

JavaScript

$('#metadata_1').example();

The following field should have its example set to "This will override the metadata" as specified in the function call even though it has metadata.

HTML

<input id="metadata_2" class="{example: 'Metadata plugin does not takes precedence'}" />

JavaScript

$('#metadata_2').example('This will be override the metadata');

Clicking the following submit button should clear all example text but leave real values (if this was a real form, you do not want the examples to be sent with the form).