Form validation not working when using jquery.rules

Question

I have added form validation via class using Jquery. However, when i use the addClass it seems to fail. Any Ideas?

  $("label.choice3").click(function(){
    $(".option").addClass("valueRequired");
  });

  $("#feedback_form").validate({
    errorClass: 'feedback_form_error grid__item'
  });

  $('.valueRequired').each(function() {
    $(this).rules('add', {
      required: true,
      messages: {
        required: "Please select an option"
      }
    });
  });

Answer 1

the class 'option' exists. I need to

<%= radio_button_tag "feedback[#{line_item['id']}][size_feedback]", "0", false, class: "option" %>

Onclick the following code is done.

 $("label.choice3").click(function(){
$(".option").addClass("valueRequired");

});

This does add in the class of "valueRequired" which is fine. But its the validation that does not seem to run once the class is added.

Answer 2

Without seeing your markup, I guess you run this piece:

$('.valueRequired').each(function() {
  $(this).rules('add', {
    required: true,
    messages: {
      required: "Please select an option"
    }
  });
});

against an empty selection? At the moment you run $('.valueRequired').each() do even any elements with that class exist in your code?