I’ve created about ten sign-up forms the last year and all of them has a “Confirm password”-input. My only sure reasons for that extra input field are habit and preconceived ideas.

We are typing our passwords twice because

To find out the reason for the “confirm password” input field I did some light Googling. This is why other people adds an extra password field to their sign up forms.

a) We use this as confirmation that we typed what we meant to type.
b) It is a convention, it is what we expect and therefor get.
c) Web developers are bad habit forming idiots with preconceived ideas
d) if we type it twice we are more likely to remember it.

I am a combination

For me it is a combination. A is probably the original thought behind it, but it is also something that I just expect to be there. But I also think it’s legacy design. Something I should have abandon years ago, or at least when I learned to create a better solution of my own.

A – Confirmation

My guesstimate is that most people actually do type their passwords correctly, even if they only see stars or bullets. If they don’t, they will probably find out soon enough and use the “I forgot my password”-link. I don’t think everybody should suffer just because a few can’t type their password correctly.

B – Convention

It is actually not so much a convention now days as it might have been a couple of years ago. Just look at Virb or Facebook.

C – Idiocy

Most web developers aren’t idiots, but there are somethings we, I at least, do without thinking much about it. One of those things is probably creating an extra input and force you to type your password twice.

D – Memory

No.

Instead of confirm password

One solution is to just kill that extra input, like Virb and Facebook have done. Another is to replace it with a “Show Password”-checkbox using the Show Password Jquery plugin.

People who want a confirmation that they spelled their password correctly can tick the checkbox. Others can ignore it. And that I like, stuff you can ignore if it doesn’t concern you.

Jacob Nielsen’s blog post ‘Stop password masking’ stirred up quite the discussion and divided the web developers into three camps; Stop masking, Don’t stop masking and Do both!.

I’m definitely in favor of ‘Do both!’ and letting the user decide whether she wants her passwords masked or not. It is very simple to do and it’s fairly common concept; just look at the screen-shot of the Networks Preferences in Mac OS X above. The same thing can also be found in Microsoft Windows.

The demo in the Iframe above uses the very simple and lightweight Jquery plugin called ‘Show password’. You can get it from the ‘Show password’-project page.

“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:

<input id="text" type="password" />
<input id="checkbox" type="checkbox" /><label>Show password</label>

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');

There are several reasons to why there cannot be a perfect regular expression for validating email addresses. Firstly; the official standard, RFC 2822, just tells the basic email address syntax; john@doe.superman is a valid email address according to RFC 2822. Also the standard support characters, like ” and [, that some email clients can't handle.

Secondly and more importantly; even if the email matches a perfect regular expression, there are no guarantees that the email address belongs to the user, or even exists.

With all that said I still believe live javascript-based email address checking using regular expressions is a good idea. You can use it to prevent users from doing unnecessary typos. You don't have to force them to pass the validation, just let them know if you suspect the email to be faulty. Try the demo, created with the Jquery plugin Valid8, above and you will see what I mean.

/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(aero|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel.ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|.fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|.il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)\b$/

Above is the regular expression I use. It is heavily based on a regexp from regular-expressions.info

How do I validate email addresses if not with regular expressions?

Sending an email activation link is a perfect way of validating an email address. You email a link the user have to click on to complete the registration. The link should be disposable and often look like this: http://www.unwrongest.com/signup/?guid=8373629375284563

Never trust client-side validation

Lastly. Remember that you can never, ever, trust client-side javascript validation. It is very easy to tamper with. All validation you do on the client-side has to be done again on the server-side. Client-side validation should be mainly for the users sake.

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>

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({'value':'Username'});
$('#inputPassword').defaultValue({'value':'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 type="text" id="inputUsername" rel="Username" />
<input type="password" id="inputPassword" rel="Password" />

$('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.