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。

また$(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 に答える