Clear elaboration validation function on "no" selection. Re-initiate function on "yes" selection

Question

I have a form that shows an elaboration question when the user clicks "yes", and hides it when the user clicks "no". I currently have it so if they click "yes", the elaboration question is required. My problem is that if they click "yes" and then click "no", the validation function will NOT clear no matter what I try. They have to click "yes" again and type something in the textarea in order for the form to actually submit. I have tried everything (jQuery unbind, clear, remove, and change) to no prevail. I want them to be able to click yes and no to their hearts content, and only require the additional textarea if their final selection is on "yes". So I need it to be able to clear the specific validation function under the $('#1yes').click(function () {, without clearing the $('#affirmative1').show(1000); when the $('#1no').click(function () { is activated. Thank you in advance, Chase

Here is the jQuery:

          $('#1yes').click(function () {
              if ($('#1yes').is(':checked')) {
                  $('#affirmative1').show(1000);
                  $(function validation() {
                      $('#myform').ipValidate({

                          required: { //required is a class
                              rule: function () {
                                  return $(this).val() == '' ? false : true;
                              },
                              onError: function () {

                                  if (!$(this).parent().hasClass('element_container')) {
                                      $(this).wrap('<div class="element_container error_div"></div>').after('<span>' + $(this).attr('rel') + '</span>');
                                  } else if (!$(this).parent().hasClass('error_div')) {
                                      $(this).next().text($(this).attr('rel')).parent().addClass('error_div');
                                  }
                                  //alert('Form is ready for submit.');
                              },
                              onValid: function () {
                                  $(this).next().text('').parent().removeClass('error_div');
                                  $(this).focus();
                              }
                          },
                      });
                  });
              }
          });

          $('#1no').click(function () {
              if ($('#1no').is(':checked')) { $('#affirmative1').hide(1000); 
           //code to clear "validation" function
           }
          });

Here is the HTML:

 <div class="radio single_form_element">
        <div class="chk_div">
        <p>
          <label>1)  Do you have some involvement or financial interest that is, or could be perceived to be, in conflict with the proper discharge of your duties at the
    University?</label><br>
          <input type="radio" name="response1" value="yes" id="1yes" required>yes<br>
          <input type="radio" name="response1" value="no" id="1no" required>no
        </p>


        <div id="affirmative1" style="display:none; margin:0 4% 0 4%;">
        <fieldset>
        <p>
          <label>Describe the University-administered project and your involvement, also include information about federally-funded projects you are working on that could reasonably be affected by an outside financial interest:</label><br>
          <textarea name="comments1a" class="input_border input_width required" rel="Enter more info here!"></textarea>
        </p>
        </fieldset>

        </div>
        </div><!-- End CHK_DIV -->
    </div><!-- END SINGLE FORM ELEMENT(RADIO) -->

Answer 1

There was a lot wrong in existing code. The only thing that was working at all was html5 required property on radios.

The context of this within all the handlers is wrong, the code is obviously copy/pasted from original site, but set up is different.

The radio class in plugin object doesn't exist, and plugin won't validate based on type=radio.

Also $(document).ready(function{.. is same as $(function(){.. and there is never any reason to nest one in the other. There is no reason to have more than one document.ready for this code at all.

Here is some working code:

$(document).ready(function () {

    $('input[name="response1"]').change(function () {
        var showDescription = $('#1yes').is(':checked');
        $('#affirmative1')[showDescription ? 'show':'hide'](1000);
        //$('.dependsRadio').prop('required', showDescription);
    });

    $('#myform').ipValidate({ 
        /* this class "dependsRadio" added to textarea html to make validation work*/       
        dependsRadio:{
             rule: function () {
                var yesChecked=$('#1yes').is(':checked');
                 return  yesChecked ? $(this).val() !='' :true;
            },
            onError: function () {
             alert('textarea not valid')
            },
            onValid: function () {

            }
        },
        /* class added to radio elements*/
        radioClass: { 
            rule: function () {
                return $('input[type=radio]:checked').length < 1 ? false : true;
            },
            onError: function () {
                 alert('radio not checked')
            },
            onValid: function () {

            }
        },

        submitHandler: function () {
               alert('form is valid');
            return false;/* debug mode*/
        }
    });
});

DEMO: http://jsfiddle.net/VgG4M/1/

Strongly suggest in future using plugins with documentation which this one definitely has none