Applying the 'star' Class to a Radio Input Breaks jquery.validate

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a standard form with radio input groups but do not apply the 'star' 
class
2. Setup jquery.validate metadata validation like this:

        $.metadata.setType("attr", "validate"); 
    $("#ReviewForm").validate();

3. Add the 'validate' attribute defined by metadata above 
(validate="required:true") to the first 
radio input, as described in jquery.validate documentation
3. At this point, validation works fine
4. Apply the 'star' class to the radio inputs in the group like this:

<input name="question_<?php echo $question['id'] ?>" type='radio' class='star' 
validate="required:true" value='1'/>
<input name="question_<?php echo $question['id'] ?>" type='radio' class='star' 
value='2'/>
<input name="question_<?php echo $question['id'] ?>" type='radio' class='star' 
value='3'/>
<input name="question_<?php echo $question['id'] ?>" type='radio' class='star' 
value='4'/>
<input name="question_<?php echo $question['id'] ?>" type='radio' class='star' 
value='5'/>

5. Validation no longer has any effect on the radio group

What is the expected output? What do you see instead?
      I expected validation to still work but instead validation ignores the radio groups when the 
star rater is in effect.

What version of the plugin/jQuery are you using?
PLUGIN VERSION: 2.5
JQUERY VERSION: 1.2.6

On what browser(s) or operating system?
BROWSER(S): Mac Safari

Please provide a link to where the problem can be observed:
URL: No public site available

Feel free to provide any additional information below.

I tried using the latest version of the plugin (v3.0) but it has the same 
issue.  Also, as you can see 
from the dynamic inputs, I can't use jquery.validate standard validation rules 
because each of the 
radio inputs is dynamically generated.  It has to be this way because the 
number of radio inputs 
is variable.

Thanks for your help!

Original issue reported on code.google.com by agita...@mac.com on 19 Mar 2009 at 3:13

[GoogleCodeExporter]

The problem was that the plugin removed every radio box and inserted a hidden 
field 
instead to hold the value to be submitted. But try the new version:
http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js
...the plugin now manipulates the radio boxes (changing their selection) which 
should 
not interfere with the validation plugin in anyway.

Let me know if it works

Original comment by diego.a...@gmail.com on 21 Mar 2009 at 2:55

• Changed state: Started

[GoogleCodeExporter]

The star rating now works with the validate plugin to some degree.  Here are 
the issues I'm seeing (using the 
same HTML as I originally posted):

The star rating shows only the empty stars (no hover, fill or drain effects, 
only the empty star even when 
selected)

The validate plugin, even though it can validate with the star rater in effect, 
can't focus the invalid fields or 
clear the error class after the invalid field is successfully validated.  Both 
these issues work fine when the star 
rater is not in effect, but I don't know if it can really be resolved simply 
because of how each of the plugins 
has to work to do what they do.

Thanks, Diego, for the help :)

Original comment by agita...@mac.com on 21 Mar 2009 at 7:35

[GoogleCodeExporter]

a) The HTML you sent doesn't have a default box checked, so the stars will (as 
they 
should) be displayed initially empty.

b) The validate plugin will not be able to set the focus on the radio boxes 
because 
they are hidden. Unfortunately there is no way around this...

Original comment by diego.a...@gmail.com on 21 Mar 2009 at 7:50

[GoogleCodeExporter]

Point B above is understandable given how the validate plugin works.

Regarding point A however, the stars do display empty initially, which is what 
I need so I can't have a box 
checked by default.  

But what I meant is that there are no hover effects, and no stars show a rank 
even after selected.  In any state 
(hovered or selected) the stars stay empty.  They never show a potential rank 
when hovered and don't show 
the selected rank when clicked.  They only ever show empty stars.

Thanks!

Original comment by agita...@mac.com on 21 Mar 2009 at 8:14

[GoogleCodeExporter]

Diego, just to clarify, the star rater does still accept the value of the radio 
box that gets clicked, there's just no 
visual indication that you are hovering over the rater (no stars get filled) 
and no indication that a selection was 
made (the rater only displays empty stars even after a selection).

The stars do display when in readOnly mode and an initial value is set, so it 
only has to do withe the mouseover 
effects and filling the stars when a selection is made.

Original comment by agita...@mac.com on 21 Mar 2009 at 8:19

[GoogleCodeExporter]

Hi Agita, I think you're using the old CSS. Can you download the entire package 
again 
just to make sure?
http://www.fyneworks.com/jquery/star-rating/#tab-Download

Original comment by diego.a...@gmail.com on 21 Mar 2009 at 9:28

[GoogleCodeExporter]

I re-downloaded the whole package and tested and it was the same thing, but 
then realized the single quotes 
around star.gif and delete.gif in the css file were preventing the gfx from 
showing.  Removed those and had no 
problem.

Thanks man!

Original comment by agita...@mac.com on 21 Mar 2009 at 10:03

[GoogleCodeExporter]

I've changed the css and removed the single quotes from future distributions...

Original comment by diego.a...@gmail.com on 22 Mar 2009 at 11:18

• Changed state: Done