Suggestion: Integrateable with jquery validation plugin

[GoogleCodeExporter]

I seem to be having some difficulty integrating this with the jquery validation 
plugin.  It would be a really nice feature if this could be easily integrated 
with the validation plugin.

Original issue reported on code.google.com by davidm0...@gmail.com on 7 Jul 2010 at 4:51

[GoogleCodeExporter]

I am having problems integrating this with jQuery 1.4.2 and tablesorter. 

Original comment by khushiar...@gmail.com on 9 Jul 2010 at 7:20

[GoogleCodeExporter]

I am open to checking these things out, but these problem reports are very 
nebulous.  Can you please describe some detailed descriptions of the problems 
you're seeing?  

A stripped-down demo page would be ideal!

Such a page should contain ONLY the following:

- The core jQuery lib
- The Watermark plugin
- The conflicting plugin
- Just enough HTML to should the basic conflict

Thanks!

Original comment by t...@speednet.biz on 18 Jul 2010 at 6:33

[GoogleCodeExporter]

I will put something together for you.  In short, it allows the form to pass 
validation because it puts the watermarks back in before the validation plugin 
does its validation.

Original comment by andymoqu...@gmail.com on 10 Aug 2010 at 8:20

[GoogleCodeExporter]

that above comment was me, someone was logged in on my come!

Original comment by davidm0...@gmail.com on 10 Aug 2010 at 8:21

[GoogleCodeExporter]

Any update on this issue?  I was looking for a test case I could review.

Original comment by t...@speednet.biz on 27 Aug 2010 at 4:08

[GoogleCodeExporter]

Sorry for the delay in response...things have been hectic as of late.  Anyways, 
here is a page you can check out that has two very simple forms. You will 
notice that the first form submits with out any error msg and the second will 
not submit without putting something in the boxes.  The first form passes 
validation because the watermarks are not cleared by the time the validation 
script runs; thus the suggestion to make watermark integrate-able somehow. 

I have included jquery-1.4.2, jquery.validate.js, and your jquery.watermark.js.

Test url: http://myvisionarydesign.com/water-mark/

Original comment by davidm0...@gmail.com on 30 Aug 2010 at 7:12

[GoogleCodeExporter]

It looks like this framework first calls the existing onsubmit() handler (my 
existing form validator), and THEN clears out the watermarked "values".  

This should happen the other way around!  Right now my validation framework is 
only checking that the user has submitted some text in each input. Because your 
validation did not yet clear out the "required..." text, it sees that as valid 
input and allows the process to proceed.

My recommendation is to provide an option to have the watermark, on submit, 
first clear the watermark values, and THEN call the existing onsubmit, and then 
actually submit the form if the existing onsubmit() returns true.

Otherwise this is useless to me for most of my forms  :(

-Brian

Original comment by bhen...@gmail.com on 30 Aug 2010 at 7:23

[GoogleCodeExporter]

Also, is there an ability for me to retrieve the watermark value text from a 
given input?

Say I do $("#firstName").watermark("First Name", "watermark");

It would be cool to do var the_text = $("#firstName").watermark() to get the 
text string "First Name" back again. That would help me work around some issues 
in this plugin.

-Brian

Original comment by bhen...@gmail.com on 30 Aug 2010 at 7:54

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

@davidm0783:

The answer to this issue is quite simple.  You need to change the order of your 
watermark/validation statements.  The watermark needs to be setup on the input 
elements BEFORE you set up the validation on those same elements.

The reason?  Because jQuery sequences the order that its events are called in 
the order  they were set up.  Because both the watermark and the validation 
plugin both use the jQuery submit event, when you specify the validation first, 
it will always be called first.

Here is how you need to change the order in your code.

BEFORE

validator = $("#form1").validate();
$('#fname').watermark("First Name");
$('#lname').watermark("Last Name");

AFTER

$('#fname').watermark("First Name");
$('#lname').watermark("Last Name");
validator = $("#form1").validate();

Voila! It now works fine.

Original comment by t...@speednet.biz on 2 Sep 2010 at 1:23

[GoogleCodeExporter]

As a bonus, I have another tip for you when using the validation plugin.

You'll notice after trying to submit the form, and having it fail, the 
watermarks go missing until you focus and blur the input elements manually.  
This can be easily fixed!

Simply amend you validate function call with one option, as follows:

validator = $("#form1").validate({invalidHandler: $.watermark.showAll});

After making that simple change, your watermarks will re-appear after the form 
submission fails.

Original comment by t...@speednet.biz on 2 Sep 2010 at 1:32

[GoogleCodeExporter]

Actually, I was not using the jq validator plugin  :(  I was using the 
coldfusion's own validation system, which is basic, but it binds to the 
onsubmit() event of the form.  I don't really control this as the form itself 
is created by the framework. So I don't have an explicit "validate" statement 
that I can move around  ;-/

-Brian

Original comment by bhen...@gmail.com on 3 Sep 2010 at 1:55

[GoogleCodeExporter]

@bhendel: This issue reported by davidm0783 is regarding the jQuery Validation 
plugin, not CF.

However, if you follow the logic I have outlined above, you will likely be 
successful in CF as well.  Simply be sure that the jQuery Watermark plugin is 
included in the page before the CF script is injected/included in the page.  
Even though you say it's included in CF, it still has to inject script into the 
page.  Just find where it's injecting the script, and be sure that the 
Watermark plugin is included higher up in the code.

If there is no way you can figure it out, then I'd suggest disabling 
client-side validation in CF, and replace it with the jQuery validation plugin. 
 It is not ideal, but if you don't know how to manipulate script order in CF, 
it should at least get you going.

Original comment by t...@speednet.biz on 6 Sep 2010 at 12:21

[GoogleCodeExporter]

Perceived problem fixed by reordering lines of code.

Original comment by t...@speednet.biz on 6 Sep 2010 at 12:22

• Changed state: Done

[GoogleCodeExporter]

Thanks for taking the time to look into this for me, I really appreciate it.  
You have furthered my knowledge of jquery!

Original comment by davidm0...@gmail.com on 13 Sep 2010 at 3:09