1

これをもう少し洗練しました：

対応するオプションが選択されていない場合、入力および選択フィールドで「必須」属性を削除しようとしています。(例: オプション値は = to div id です)。現在、display:none に設定されているフィールドには必須フィールドがあるため、次のフィールドセットに進むことはできません。したがって、両方のオプションのすべてのフィールドが入力されていない場合、次のフィールドセットに進みません。表示されていないフィールドを無視するにはどうすればよいですか?

ここにフィドルがあります：http://jsfiddle.net/darcher/aUKhN/26/

HTML

<form action="#" id="form">
  <fieldset>
    <legend>Select an option</legend>
    <div class="item">
      <label><span>Option 1 or 2?</span>
        <select name="oneOrTwo" id="two-op" required>
          <option value="" disabled>&mdash; Select &mdash;
          <option value="one">Option 1
          <option value="two">Option 2
        </select>
      </label>
    </div>
    <div class="item">
      <div id="one" class="addInfo" style="display:none">
        <div class="item">
          <label><span>Option 1</span>
            <input type="text" name="op1" required>
          </label>
        </div>
      </div>
      <div id="two" class="addInfo" style="display:none">
        <div class="item">
          <label><span>Option 2</span>
            <input type="text" name="op2" required>
          </label>
        </div>
      </div>
    </div>
    <input type="button" name="prev" class="prev" value="Previous">
    <input type="button" name="next" class="next" value="Next">
  </fieldset>
  <fieldset>
    ...
  </fieldset>
</form>

jQuery

$(function () {
  $('#two-op').change(function () {
    $('.addInfo').hide();
    $('#' + $(this).val()).show();
    var formElements = new Array("one", "two");
    for (i = 0; i < formElements.length; i++) {
      if ($(this).val() != formElements[i]) {
        $("#" + formElements[i]).children().find('input,select').each(function () {
          $(this).val('');
          $(this).removeAttr('required');
        });
      } else {
        $(this).attr('required', 'required');
      }
    }
  });
});

更新：このアプローチを採用しました

   $(function () {
   $('#employment_status').change(function () {
       $('.addInfo').hide();
       $('#' + $(this).val()).show();
        var formElements = new Array("emp","semp","ret","unemp","student");
        for(i=0; i < formElements.length; i++){
            if($(this).val()=="emp" ||$(this).val()=="semp" ) fieldSetNumber = 9;

            else fieldSetNumber = 3;
            if($(this).val()!=formElements[i]){
                $("#"+formElements[i]).children().find('input,select').each(function(){
                    $(this).parents("div").first().removeClass("good");
                    if($(this).is('input')) $(this).val('');
                    if($(this).is('select')) $(this).val('');
                });
            }
        }

   });

});

4

3 に答える 3

0

ユーザーが最初の をトリガーしたときに、フィールドごとに検証を初期化できます<select>。<select>これは、最初ののリスナーで実行できますchange。あなたの特定のケースでは： $('#empStatus').on('change', function() { //init validation on fields you want });

このイベント ハンドラーでは、2 つの方法でフィールドにアクセスできます。

  • 一般分野
  • 選択肢固有のフィールド (または動的フィールド)

明らかに、表示されていないフィールドは検証されるべきではありません。

于 2013-10-12T19:32:25.177 に答える
0

これがあなたが望んでいたものの実際の例です...

http://jsfiddle.net/9Q8R7/1/

以下のコード

var t, cc=0, sp=$("<span class='err'>required</span>");

$('#btn').click(function(){
    if(!cc) return;
    var tt= true;
    $('#'+cc).children('input').each(function(){
        if($(this).val()==''){tt= 0; return tt;}
    });
    if(tt) $('#f').submit();
});

$('#c').change(function(){
    cc=$(this).val();
    $('#f>fieldset').hide().filter("#"+cc).show();
});

$('input').on('blur',function(){
    t=$(this);
    if(t.val()=='') t.after(sp); 
    else t.next('.err').remove(); 
});

それは原則を提示し、あなたはそれを拡張することができます...しかし、今あなたは何をすべきかを知っています.

于 2013-10-12T20:48:46.903 に答える
0

:visibleセレクターで要素が表示されているときはいつでも確認できます。

属性を追加または削除する必要はなく、require表示されているかどうかを簡単に確認できます。非表示の場合は無視されます。

$('.addInfo:visible').find('input[type=text]').each(function()
{
   if($(this).val() == "")
   {
       if($(this).attr('required'))
       {
          alert('input field ' + $(this).attr('name') + ' is required!');
       }
    }
}

最初にチェックするのは、親要素( .addInfo)が表示されているかどうかです。次に、子入力要素を見つけます。繰り返しますが、これは入力フィールドが表示されている場合のみです。
表示されるすべての入力について、属性があるかどうかを確認しますrequired。その場合、値が入力されているかどうかを確認し、そうでない場合はメッセージを警告します。

jsFiddle の例

注 オプション 3
オプション 3 には属性がありませんrequired。これは、input 要素が属性requiredit may be blank を持っていない場合に表示されます。

何も起こらないときはすべて良いです:)

于 2013-11-20T12:45:04.400 に答える