0

我有一个表单，当用户单击“是”时显示详细问题，并在用户单击“否”时隐藏它。我目前拥有它，因此如果他们单击“是”，则需要详细说明问题。我的问题是，如果他们单击“是”然后单击“否”，无论我尝试什么，验证功能都不会清除。他们必须再次单击“是”并在文本区域中输入一些内容才能实际提交表单。我已经尝试了所有方法（jQuery 取消绑定、清除、删除和更改），但没有成功。我希望他们能够对他们的内心内容单击是和否，并且只有在他们的最终选择为“是”时才需要额外的文本区域。所以我需要它能够清除下的具体验证功能$('#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) -->
4

1 回答 1

2

现有代码中有很多错误。唯一有效的是required收音机上的 html5 属性。

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

插件对象中的radio类不存在，插件不会基于type=radio.

Also$(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*/
        }
    });
});

演示：http: //jsfiddle.net/VgG4M/1/

强烈建议将来使用带有文档的插件，这绝对没有

于 2013-02-02T06:28:33.970 回答