Validation for a required element, jQuery Star Rating

Question

I use fyneworks.com/jquery/star-rating/ to make a star rating on my site. But I have some trouble with validation with jquery. I want that the user must use it.

I use this:

  $('#formid').validate({ 
    rules: {
        nameofradiobutton: { required: true }
    }
  });

to validate but with the normal { required: true } it doesn't work.

But I want to have it in an format like rules.

Please help me search for a solution lots of hours but I can't find an solution that work...

My radio HTML looks like this:

<input name="star" type="radio" value="1"class="star"/>
<input name="star" type="radio" value="2"class="star"/>
<input name="star" type="radio" value="3"class="star"/>
<input name="star" type="radio" value="4"class="star"/>
<input name="star" type="radio" value="5"class="star"/>

And my actual validate call looks like this:

$('#starform').validate({ 

        rules: {

        star: {
            required: true,
        },

    },

    messages: {
        star: {
            required: "<br />Please choose a star.",
        },

    },
        errorPlacement: function (error, element) {
         if ( element.is(":checkbox") )
         error.appendTo(element.parent("td").next("td"));
         else if ( element.is(":radio") )
         error.appendTo(element.parent("td").next("td"));
         else
         error.appendTo( element.parent());
        }       

});

---

My Form is like this

<input name="star" type="radio" value="1"class="star"/>
<input name="star" type="radio" value="2"class="star"/>
<input name="star" type="radio" value="3"class="star"/>
<input name="star" type="radio" value="4"class="star"/>
<input name="star" type="radio" value="5"class="star"/>

and my validation is like these

  $(document).ready(function () {

    $('#starform').validate({ 

            rules: {

            star: {
                required: true,
            },

        },

        messages: {
            star: {
                required: "<br />Please choose a star.",
            },

        },
            errorPlacement: function (error, element) {
             if ( element.is(":checkbox") )
             error.appendTo(element.parent("td").next("td"));
             else if ( element.is(":radio") )
             error.appendTo(element.parent("td").next("td"));
             else
             error.appendTo( element.parent());
            }       

    });

});

Answer 1

Because your star rating pluging hides the radio inputs, jQuery Validate ignores them by default. All you should need to do is add ignore:'' to your validate options and your code will work:

$('#starform').validate({ 
    ignore:'',

    //... the rest of your rules and options to follow
});

See here for the details on the ignore option.