On IE9 watermark on password input conflicts with Jquery Tools Validator

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Take http://flowplayer.org/tools/demos/validator/custom-validators.htm and 
save it locally
2. add <script type="text/javascript" src="jquery.watermark.js"></script>
3.add at the beginng of the <script> 
$('[name=username]').watermark('Username');
$('[name=password]').watermark('Password');
$('[name=check]').watermark('Confirm Password');

What is the expected output? What do you see instead?
When you submit the form on IE9 error bubbles don't appear for watermaked 
inputs with type password. Fine on Chrome. Fine for watermarked inputs whose 
type is not password.

What version of the product are you using? On what operating system?
watermark 3.1.3

Please provide any additional information below.

Original issue reported on code.google.com by b...@bryo.it on 16 Dec 2011 at 12:20

[GoogleCodeExporter]

Check the Watermark project home page, at the bottom of the page.  It shows how 
to integrate the Watermark plugin with validators.  You are probably putting 
the scripts in the wrong order.

Original comment by t...@speednet.biz on 20 Dec 2011 at 1:31

• Changed state: Invalid

[GoogleCodeExporter]

I had checked the home page before posting this and no, I'm not putting the 
scripts in the wrong order.
I have also put an example online: http://www.reeswe.com/valwmex.html
try it with Chrome and IE 9 and you'll see that on IE 9 it doesn't work.

Probably the problem stay in the fcat that type of the form is changed. If you 
modify lines 347 and 348 of jquery.watermark.js:

var $wrap = $input.wrap("<span>").parent(),
$wm = $($wrap.html().replace(/type=["']?password["']?/i, 'type="text"'));

into:

var $wrap = $input.wrap("<span>").parent(), $wm;
if ($.browser.msie) $wm = $($wrap.html().replace(/type=["']?password["']?/i, 
'type="password"'));
else $wm = $($wrap.html().replace(/type=["']?password["']?/i, 'type="text"'));

it works but the watermark is shown as *****

Original comment by b...@bryo.it on 20 Dec 2011 at 5:29

[GoogleCodeExporter]

You say that you included the watermark script first, but then I look at your 
code, and that's not true:

<!-- include the Tools -->
<script 
src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="jquery.watermark.min.js"></script>

Original comment by t...@speednet.biz on 20 Dec 2011 at 5:41

[GoogleCodeExporter]

Just to be clear, the watermark plugin is for use with jQuery, I obviously 
can't test it or certify it for use with jQuery forks like jQuery Tools.  It 
seems like they are modifying jQuery for their own UI tools, and packaging it 
into one package.  That won't work, because the watermark plugin has to be 
included in your page before any validation tools are installed.  If it's not, 
then the validation tool steals control of the text input elements before the 
watermark can clear the content.

Original comment by t...@speednet.biz on 20 Dec 2011 at 5:47

[GoogleCodeExporter]

In the home page of the watermark it talks about set up order not include 
script order. Does it matter?

I understand that
$('#myElement').watermark('Required');
$('#myForm').validate();

is different from 
$('#myForm').validate();
$('#myElement').watermark('Required');

but the order of the scripts... however I tried to switch them but doens't work

Original comment by b...@bryo.it on 20 Dec 2011 at 5:53

[GoogleCodeExporter]

Oops, you're right, my mistake.  I guess it's been a while since I last read my 
own page.

Nevertheless, it is obviously some kind of conflict between the validator and 
the watermark plugin.  The problem is that I would have to understand how their 
validator works in order to understand why it is conflicting with my plugin.  
Have you tried contacting the jQuery Tools support?

Also, my previous comment about trying to support a forked version of jQuery 
still holds.  I'm not sure how I could support that.

Original comment by t...@speednet.biz on 20 Dec 2011 at 6:05

[GoogleCodeExporter]

Yes, see here: http://flowplayer.org/tools/forum/60/84273

Probably they will say the same: we cannot support watermark plugin :)

It's a pity as in all browser this works fine but IE.

Thanks anyway :)

Original comment by b...@bryo.it on 20 Dec 2011 at 6:08

[GoogleCodeExporter]

I think you're probably doing the only feasible thing given the circumstances, 
by making the modification to the plugin.  It's an easy fix, so you should be 
able to make the same change to future versions of the plugin.

Looking at their response on the forum, it sounds like there is indeed some 
kind of conflict in their code.  Hopefully they can figure it out.

Original comment by t...@speednet.biz on 20 Dec 2011 at 6:22