根据条件验证动态创建的div

时间:2013-04-10 18:25:43

标签: javascript jquery html

我的代码允许用户在人TYPEATYPEB的两个选项之间进行选择。

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

here is a fiddle, please take a look at it

1 个答案:

答案 0 :(得分:1)

在您的示例中,没有id为“selector_persona”的元素。这可以防止您的第二个验证功能工作。通过传递你要验证的内容的id('has_id'),它引用该对象并检查以确保它具有值。

选择一个人,将第二个选择保留为“ - 选择类型A--”,然后单击“确定”。它会返回您的错误。 http://jsfiddle.net/zyglobe/LEfbX/131/

var validation = function(){
    var err = 0;
    err += validate('select_person', "select person.");
    err += validate('has_id', "Select whether it has an ID or not.");           
    if(err == 0){
        alert('continue');
    } else{
        alert('error: ');
    }
};

您也可以查看此部分:

$('#select_person:first-child').attr('has_id')

您正在尝试查找名为has_id的属性,该属性适用于以下内容:

<select has_id="some_value" />

我认为您的意思是选择将返回'has_id'值的attr('id'):

<select id="has_id" />