Question

我有一个表单，当用户单击“是”时显示详细说明问题，并在用户单击“否”时隐藏它。我现在拥有它，如果他们点击“是”，则需要详细说明问题。我的问题是，如果他们单击“是”然后单击“否”，无论我尝试什么，验证功能都不会清除。他们必须再次单击“是”并在textarea中键入内容才能使表单实际提交。我已经尝试了所有的东西（jQuery解绑，清除，删除和更改）没有占上风。我希望他们能够点击是和不是他们的心灵内容，并且如果他们的最终选择是“是”则仅需要额外的textarea。所以我需要它能够清除$('#1yes').click(function () {下的特定验证功能，而不会在激活$('#affirmative1').show(1000);时清除$('#1no').click(function () {。先感谢您，大通

这是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/

强烈建议将来使用带有文档的插件，这个文件肯定没有

在“否”选择上清除精细化验证功能。在“是”选择上重新启动功能

1 个答案: