2

TYPEAユーザーが personとの 2 つのオプションから選択できるようにするコードがありますTYPEB

SELECT PERSON - { TYPEA, TYPEB  }

選択に応じて、次のように表示されます。

TYPEA - { TYPEA WITH ID, TYPEA WITHOUT ID }
TYPEB - { TYPEB WITH ID, TYPEB WITHOUT ID }

これで動作しています:

html:

<div id="person-A-withID"    class="persons" style="display:none"></div>
<div id="person-A-withoutID" class="persons" style="display:none"></div>
<div id="person-B-withID"    class="persons" style="display:none"></div>
<div id="person-B-withoutID" class="persons" style="display:none"></div>

jQuery:

$(function () {
   $('#has_id').show();
   $('#select_person').change(function () {
     $('.persons').hide();
     if ($('#select_person').val() == 'typeA') {
        $("#has_id").html('');
        $("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
        $("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
        $("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
     }

     if ($('#select_person').val() == 'typeB') {
        $("#has_id").html('');
        $("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
        $("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
        $("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
     }
  });

  $('#has_id').change(function () {
    $('.persons').hide();
    $('#' + $(this).val()).show();
  });
});

次のコードを使用して、値が空か 0 かどうかを検証する関数があります。

function validate(id, msg) {
    //search object
    var obj = $('#' + id);

    if(obj.val() == '0' || obj.val() == ''){
            //append error to particular div called #id__field_box 
        $("#" + id + "_field_box .form-error").html(msg)
        return true;
    }
    return false;
}

そして、次のように検証関数内で呼び出します。

var validation = function(){
  var err = 0;
  err += validate('select_person', "select person.");

  //err += validate($('#select_person:first-child').attr('has_id'), "Select wether it has ID or not."); 
  //err += validate('has_id', "Select wether it has ID or not.");   

  if(err == 0){
         //continue
  }else{
         //stop
  }
};

問題は、has_idパーツを検証できないことです。最初のパーツしか検証できません。を検索するためにどのように使用できhas_idますか?

ここにフィドルがあります。見てください

4

1 に答える 1