“Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.” - Jacob Nielsen, Stop password masking.

This Jquery plugin, ‘Show password’, let the user decide whether they want their passwords masked or not. Just take a look at the demo beneath and you’ll see what I mean.

How to implement

Very simple! First you download, then you do like this:

Show password

Two html elements are needed; a password field and a checkbox. Then you add the javascript below and change #text and #checkbox to the names of your input IDs.

 $('#text').showPassword('#checkbox');

Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password. It makes the assumption that it is possible to test 2800 000 000 of passwords per second - something that, according to ElcomSoft, is possible with Windows Vista passwords, a high end graphics card and the ElcomSoft Distributed Password Recovery software.

How to use Password Strength

You need two html elements to use ‘Password Strength’; an input field and an element to show the time in.

$('#pass').pwdstr('#time');

How to use Tabify

It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. In the example below notice how the href-attribute on the link elements corresponds to the content div IDs.

Home
Guestbook
Links

Content for Home
My guestbook
Links

When you have created the necessary html code you need to include the javascript file with the plugin and call the tabify method.

$('ul').tabify();

This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

How to use Elastic

The usage of Elastic is very straight forward. All you have to do is include the javascript file containing the plugin and use the elastic method.

	$('#myTextarea').elastic();

Known issues

EM The elastic plugin does work with font sizes, line-heights and such set in em, but it does work better with px. Elastic needs to convert your em value to a pixel value. 1.2em might be 16.56478px which is not exactly the same as 1.2em. After a couple of hundreds of rows the height of the text area is going to be too small or too big.

Limit is a plugin for the javascript framework Jquery that limits the number of characters that can be entered in a textarea or input field. The plugin can also report the number of characters left before the user reaches the length limit.

How to use Limit

To use the full power of Limit you need two html elements; one textarea or input field and an element to show amount of characters left.

You have <span id="charsLeft"></span> chars left.
<textarea id="myTextarea"></textarea>
<script type="text/javascript">
    $('#myTextarea').limit('140','#charsLeft');
</script>

If you don’t want to show the amount of characters left you can do like this.

<textarea id="myTextarea"></textarea>
<script type="text/javascript">
    $('#myTextarea').limit('140');
</script>

Chat is a fully working implementation of Jabbify’s chat solution - The Jabbify Comet Service. Jabbify’s service is a http-push solution that is hosted by Jabbify. If you expect less than 15 simultaneous users its free, after that it costs a little bit of money every month, depending on how many users you plan on having.

The service is very easy to work with, all you need to do is to download the their Javascript API and do a couple of GET requests. If you want to start with a working implementation why not download the source code to my demo.

How to get the demo working

Download and decompress the zip file. Open up index.html and start chatting.

Highlight is a simple Jquery plugin that highlights text phrases. It does so by wrapping one or multiple phrases with a span with the class name “highlight”.

How to use Highlight

You can throw both a string or an array on Highlight. Have a look at the example below. The first row is going to highlight the word acknowledgment, the second row is going to highlight both ‘matching’ and ‘class name’. The code shown in the example below has been executed in this page.

	$('.body').highlight("acknowledgment");
	$('.body').highlight(["matching","class name"]);

What actually happens is that the matching phrases are wrapped inside a span element with the class name highlight. Therefor you will also need to add some css code to get a visual result.

.highlight { background: #ff0; }

Acknowledgment

Johann Burkard The core is based on ideas presented in Johann Burkard’s Jquery plugin with the same name.

This Jquery plugin makes creating accordions pain free. Just create an ul list and call the accordion javascript method and it is all done! Also it is super lightweight, just around 0.5kb. This Accordion script sets no limit for the depth of your accordion. You can make it as many level as you want.

How to use Accordion

It is very easy to use Accordion. All you need to do is to create an ul-list, fill it with a couple of li-elements and div-elements for the content; In the example below if you click on New York the div element containing Information about New York will show.

<ul>
    <li>
        <a href="#america">America</a>
        <ul>
            <li>
                <a href="#america-newyork">New York
                <div>Information about New York</div>
            </li>
            <li>
                <a href="#america-sanfransisco">San Fransisco</a>
                <div>Information about San Fransisco</div>
            </li>
        </ul>
    </li>
    <li>
        <a href="#antarctica">Antarctica</a>
        <div>Information about Antarctica</div>
    </li>
</ul>

When you have created the necessary html code you need to include the javascript file with the plugin and call the accordion method. See the demo for a more detailed example.

$('ul').accordion();

Linking to a level inside the accordion

Notice the href-attributes on each a-element. If you in the html code example above create a link to #america-newyork and click it the accordion will open up ‘New York’ and all it’s parents.

Open a panel on load

Set the li classname to “current” and it will be open when the page loads.

Valid8 features support for three types of validation techniques; Regular expressions, custom javascript functions and Ajax requests. The three techniques can be combined in any way you want. For example, in a very extreme case, you can use two regular expressions, one javascript function and three ajax requests for validating a single input field.

1) Regular expressions
For determining whether a value matches a regular expresion. For example determining if a user name consists of only letters and numbers.
2) Javascript functions
Send one or multiple values to a custom function. For example checking if the ‘password’ and the ‘confirm password’ input field matches each other.
3) Ajax requests
Post one or multiple values to a external file. For example to see if a user name already exists in the database.

Examples and demos

Valid8 ranges from super simple ‘making an input field required’ to an near endless possibility of complexity. I think the best way for me to describe how Valid8s individual parts is by showing you a set of examples.

How to make an input field required
This example will show you how to make an input field required and show the default validation message ‘Required’ if the field is left empty.
How to make an input field required and show a custom error message
This example will show you how to make an input field required and show a custom validation message if the field is left empty.
How to validate with a single regular expression
This example will show you how to validate using a regular expression that dictates that the input field(s) only can contain letters and numbers.
How to validate with multiple regular expressions
This example will show you how to validate using two regular expressions. One that dictates that the input field is required and one that the input field only can contain letters and numbers. Valid8 will show a different validation message depending on which regular expression it violates first.
How to validate with a javascript function
This is example will show you how to compare the Password field with the Confirm Password field and make Confirm Passoword invalid if it doesn’t match the Password field.
How to validate using an ajax request
This example will show you how to make see if an email address already is in your database.

Example - How to make an input field required

Calling the valid8 method without any arguments will show the default validation error message ‘Required’ if the input field is left empty.

    $('#inputUsername').valid8();

Example - How to make an input field required and show a custom error message

Calling the valid8 method with a string as an argument will show the string as an a validation error message if the input field is left empty.

    $('#inputUsername').valid8('Username is required');

Example - How to validate with a single regular expression

The example below is using a regular expression that dictates that the input field(s) only can contain a-z, A-Z and 0-9. If the value contains for example the character ‘@’ the validation message ‘You can only use the letters A-Z and numbers’ will be shown.

    $('#inputUsername').valid8({
        'regularExpressions': [
            { expression: /^[a-zA-Z0-9]+$/, errormessage: 'You can only use the letters A-Z and numbers'}
        ]
    });

Example - How to validate with multiple regular expressions

The example below is using two regular expressions that dictates that the input field(s) not can be empty and only can contain a-z, A-Z and 0-9. If the value contains for example the character ‘@’ the validation message ‘You can only use the letters A-Z and numbers’ will be shown. If the field is left completely empty it will show the validation message ‘Field is required’.

    $('#inputUsername').valid8({
        'regularExpressions': [
	    { expression: /^.+$/, errormessage: 'Username is required'},
        { expression: /^[a-zA-Z0-9]+$/, errormessage: 'You can only use the letters A-Z and numbers'}
        ]
    });

Example - How to validate with a javascript function

In this example validates the input field ‘#inputPasswordVerification’ and see if it matches the input field ‘#inputPassword’. If it doesn’t match the validation message ‘Passwords does not match’ will be shown.

function doesPasswordFieldsMatch(values){
    if(values.password == values.verification)
        return {valid:true}
    else
        return {valid:false, message:'Passwords does not match'}
}

$('#inputPassword').valid8('Password is required');
$('#inputConfirmPassword').valid8({
    'jsFunctions': [
        { function: doesPasswordFieldsMatch, values: function(){
                return { password: $('#inputPassword').val(), verification: $('#inputConfirmPassword').val() }
            }
        }
    ]
});

Example - How to validate with an ajax request

This example will post the value of the input field ‘#inputEmail’ to isEmailUnique.php.

	$('#inputEmail').valid8({
	    'regularExpressions': [
	        { expression: /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/, errormessage: 'Email is not valid'},
            ],
	    'ajaxRequests': [
	        { url: 'lib/isEmailUnique.php' }
	    ]
	});

$email = $_POST['value'];

if(!isEmailUnique($email)){
	$json["valid"] = false;
	$json["message"] = 'Email is already in use';
}
else {
	$json["valid"] = true;
}

function isEmailUnique($email){
	// Database look-up should go here here...
	// But for the sake of this demo a random return will do
	return rand(0, 1);
}

print json_encode($json);

How to use Defaultvalue

There are two ways of using Defaultvalue. The first one is the, according to w3c, pure one. The second one is in some cases the right way to go.

The first way

In the pure one you set the default value, the value you want to show when the input element is empty, in the javascript. For every default value you need to call the defaultValue function.

$('#inputUsername').defaultValue('Username');
$('#inputPassword').defaultValue('Password');

The second way

The second way of using Defaultvalue is in some cases the easiest approach, but it is not according to w3c’s recommendations. It does not validate since it makes use of the rel attribute. First off the rel attribute should be used to state a relation, secondly the input element doesn’t even have a rel attribute. But, it works… even in Internet Explorer 6.

You state the default value directly in the html using the inputs rel attribute. In the javascript you only need to call the defaultValue function once.

$('input').defaultValue();

Empty input fields has the class name ‘empty’

When the default value is shown the class name ‘empty’ is added to the field. Take a look at the demo and see how the default values differs from the user created values.

Password fields manipulate the DOM

Since you can’t change the type of an input field in Internet Explorer, Defaultvalue creates a clone of your password field but with the type text instead.