Can I Get To Look Like ?

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

Solution 1:

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:

<inputtype="password"id="passwordId" />
<inputtype="hidden"id="hiddenID" />

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

Solution 2:

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.

Solution 3:

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');
        }
    } elseif ($(this).val() == "") {
        $(this).attr('type', 'text');
    }
});