Looking for a jquery plugin that will mask sensitive information when entered in a normal textbox that is compatible with validation plugin

Question

I have a multi-step form in which some of the fields are collecting sensitive information.

A requirement that has come up is that we mask what people enter (like a password field) as they enter it for one particular field, so if someone is looking over their shoulder, they don't see the content.

The problem is that users are able to back and forth in the form and I need the values entered to be populated when the person comes back to that step, so I need to use a normal text box.

I tried using this plugin: http://code.google.com/p/iphone-password/

It works great, but there is a conflict with the jquery validation plugin I'm using: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

My goal with this is not to prevent the person from getting the information - it's their information. My goal is to appease my client by providing a way to mask the information from people who might be looking over their shoulder.

Ideally, I could find a way for the iphone-password plugin I found (or something like it) to co-exist with validation because I love the fact that the user can briefly see the information as they enter it, but then it's quickly hidden.

If anyone can provide some ideas, I would greatly appreciate it.

If there are no obvious solutions to this, I may just use the password input. If the person returns to the step, I'll hide the password field and display a short portion of the sensitive information as text with a link to change it, which would then show the password fields again.

Answer 1

Use an <input type="password" /> box. It supports value="..." the same way an <input type="text" /> box does while masking its text.

I need the values entered to be populated when the person comes back to that step, so I need to use a normal text box.

You can pre-populate a password box exactly the same way you can with a regular text box, so I'm not sure what you mean by that.

Answer 2

Why don't you use an <input type="password"... to collect the data (and show stars), but then store the value in a <input type="hidden" field behind the scenes. Validation would need to look at the hidden field(only) for content, while the user has to accept they cannot edit that content - only replace.