CODEWITHSUNDEEP
javascriptcssvalidationpasswords
Zach Lysobey
Zach Lysobey

Reputation: 15744

Can I get <input type=text> to look like <input type=password>?

I'm trying to deal with a frustrating Internet Explorer issue that prevents me from using jquery-validate in conjunction with jquery-placeholder. In short, the validation does not work on fields with type=password.

More info Here

One possible fix I came up with is to modify my passwords to be type=text, but this of course displays the passwords in plain-text rather than as *******.

Is there any clever html/js/css trick to make text fields display as though they were passwords?

Upvotes: 1

Views: 3566

Answers (3)

Zach Lysobey
Zach Lysobey

Reputation: 15744

While these answers were coming in, I had an epiphany of my own. At first glance, it appears to work. I'll check out the other answers and accept whichever approach looks like it will work best and be the least "hacky".

I came up with this approach when I discovered that the problem only exists when the field is empty (still has placeholder text), and as such, only will not pass "required" validation. My fix is to change it to type=password when content is entered.

My approach:

$('#password, #password_confirm').keyup(function(){
    if ($(this).attr('type') === 'text') {
        if ($(this).val().length > 0) {
            $(this).attr('type', 'password');
        }
    } else if ($(this).val() == "") {
        $(this).attr('type', 'text');
    }
});

Upvotes: 1

Bryce Easley
Bryce Easley

Reputation: 4841

So potentially you could have something set up like this.

Have a hidden input type that simulates the password values

So I guess jquery wise it would be

//everytime the password changes hidden changes with it.
$('#passwordId').change(function() {
 $('#hiddenID').val() = $('#passwordId').val();
});

html:

<input type="password" id="passwordId" />
<input type="hidden" id="hiddenID" />

So this would allow you to validate the hidden input which would be the same value as the password.

Upvotes: 2

streetlogics
streetlogics

Reputation: 4730

First "hack" I can think of would be to add a "data-changed" attribute to the input="password" field, then attach an "onchange" event to the password field that sets "data-changed" == true, so that way you can validate if the value "password" was in fact entered by the user (data-changed == true) or if it is being submitted by the placeholder plugin itself.

Upvotes: 1

Related Questions