清除“no”选择的详细验证功能。在“是”选择时重新启动功能

Question

我有一个窗体，当用户单击“是”时显示详细问题，并在用户单击“否”时隐藏它。我现在拥有它，所以如果他们点击“是”，则需要阐述问题。我的问题是，如果他们点击“是”然后点击“否”，验证功能将不会清除，无论我尝试什么。他们必须再次单击“是”，然后在textarea中输入某些内容以便表单实际提交。我已经尝试了一切（jQuery解除绑定，清除，删除和更改）以无效为准。我希望他们能够在他们的心中点击“是”和“否”，并且如果他们的最终选择是“是”，则只需要额外的textarea。所以我需要它能够清除$('#1yes').click(function() {下的特定验证功能，而在激活$('#1no').click(function() {时不会清除$('#affirmative1').show(1000);。谢谢你在前进， 大通

这里是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 
      } 
      }); 

下面是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

有很多错误的现有代码。唯一能够工作的是收音机上的html5 required属性。

在所有处理程序中的this的上下文是错误的，代码显然是从原始站点复制/粘贴，但设置是不同的。

插件对象中的radio类不存在，插件不会基于type=radio进行验证。

另外$(document).ready(function{..与$(function(){..相同，并且没有任何理由将一个嵌套在另一个中。根本没有理由为此代码提供多个document.ready。

下面是一些工作代码：

$(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/

强烈建议使用具有文档插件未来此一个绝对有没有