Question

我正在使用jQuery append函数来克隆输入字段，它工作正常，但我遇到验证问题。它仅验证一个组并删除已禁用的类。元素彼此不绑定。这是我的代码

<div id="name-field" class="name-field row">
<div class="col-xs-12 col-sm-6 childname">
    <div class="field text-left">
        <label class="text-left">Name of child</label>
        <input id="firstname" class="firstname" name="firstname[]" type="text" />
    </div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">                
    <div class="field text-left">
        <label class="text-left">Date of birth</label>
        <input type="text" class="date" id="thedate" name="date[]" />
    </div>
</div>
</div>

<a href="#" id="addChild" name="addchild" class="btn-success">Add Child</a>

<a href="#" id="stepname" class="btn disabled">Next Step</a>


<style>
.disabled {
    cursor: not-allowed;
    pointer-events:none;
    background-color: #cdc8c7;
}
</style>

<script>
//Iterate child function
jQuery(function($){
    $("#addChild").click(function() {
        $(".name-field:first").clone(true,true).find("input").val("").end()
            .removeAttr("id")
            .appendTo("#additionalselects")
            .append( $('<a class="delete" href="#"><i class="fa fa-times"></i></a>') );
    });
    $("body").on('click',".delete", function() {
        $(this).closest(".name-field").remove();
    });
});

//Toggle disbaled class
$('.name-field').on('input','input',function(){
//use other static element or document if not works
    var parent = $(this).closest('.name-field'); // get the parent of focused input
    var name = parent.find('input[name="firstname[]"]').val();
    var date = parent.find('input[name="date[]"]').val();
    $('#stepname').toggleClass('disabled',(!name || !date));
});
</script>

我希望你们理解我的问题。

提前致谢。

Answer 1

使用input更改keyup事件，并为事件委派添加父选择器#additionalselects

＆＃13;

//Iterate child function
jQuery(function($) {
  $("#addChild").click(function() {
    $(".name-field:first").clone().find("input").val("").end()
      .removeAttr("id")
      .appendTo("#additionalselects")
      .append($('<a class="delete" href="#"><i class="fa fa-times"></i></a>'));
    $('#stepname').addClass('disabled');
  });
  $("body").on('click', ".delete", function() {
    $(this).closest(".name-field").remove();
  });
});

function checkStatus() {
  var flag = false,
    name, date;
  $('.name-field').each(function() {
    name = $(this).find('input[name="firstname[]"]').val();
    date = $(this).find('input[name="date[]"]').val();
    if (name == "" || date == "") {
      flag = true;
    }
  });
  return flag
}
//Toggle disbaled class
$('#additionalselects').on('keyup', 'input', function() {
  //use other static element or document if not works

  $('#stepname').toggleClass('disabled', checkStatus());
});

＆＃13;

.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: #cdc8c7;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="additionalselects">
  <div class="name-field row">
    <div class="col-xs-12 col-sm-6 childname">
      <div class="field text-left">
        <label class="text-left">Name of child</label>
        <input class="firstname" name="firstname[]" type="text" />
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 dateofbirth">
      <div class="field text-left">
        <label class="text-left">Date of birth</label>
        <input type="text" class="date" name="date[]" />
      </div>
    </div>
  </div>
</div>
<a href="#" id="addChild" name="addchild" class="btn-success">Add Child</a>

<a href="#" id="stepname" class="btn disabled">Next Step</a>

＆＃13;

附加新元素后jQuery验证无法正常工作

1 个答案: