1

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?

Community
  • 1
  • 1
Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149
  • Sound more like a jQuery issue. Is all your stuff up to date? – km6zla Jun 17 '13 at 15:29
  • Yes, `jQuery 1.10.1`, & newest version of both plugins. [This is something of a known issue with the plugins](https://github.com/mathiasbynens/jquery-placeholder/issues/29); trying to find a workaround. [Test case](http://lysobey.com/placeholderValidatePassword/) if you're curious (check in IE9). – Zach Lysobey Jun 17 '13 at 15:31
  • I'm open to other suggestions and fixes, but bear in mind, I've tried many things, and have been fighting this for *way* too long now. I just want a fix - don't care how hacky at this point ;-) – Zach Lysobey Jun 17 '13 at 15:40

3 Answers3

2

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.

Bryce Easley
  • 4,811
  • 2
  • 20
  • 22
  • This is a good approach; I've seen something similar for styling select lists, and file input fields, etc... It may get a bit sloppy in my specific case since I'm generating lots of form elements programmatically. I'd have to create special cases for password fields where it inserts extra elements, etc.. However, this *does* look like it'd do the trick with a little work. – Zach Lysobey Jun 17 '13 at 15:56
  • I Think I'll use the code I came up with, but I'm going to give you the check-mark since this Answer actually directly answers the question as asked, and may be of use to future Googlers. – Zach Lysobey Jun 17 '13 at 16:05
1

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.

streetlogics
  • 4,640
  • 33
  • 33
  • oooo, clevar. So I could create another `rule` for password validation that checks that `data-` attribute. Lemme try that out real quick ;-) – Zach Lysobey Jun 17 '13 at 15:58
  • bah. I like your approach a bit better than mine, but I'm not getting it to work for some reason (probably just missing something obvious). I think I'm just going to use the code I came up with and cut my losses. Thank you though - smart and simple approach. – Zach Lysobey Jun 17 '13 at 16:04
1

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');
    }
});
Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149