验证动态附加的文本框字段-jQuery

Question

我有一个在加号按钮后附加的动态输入字段。

这些字段对应的id分别是answer0、answer1、answer2等。这意味着单击按钮后，id 将动态附加到文本字段。 现在我想验证这些字段。我的验证码如下

function showValidation(response) {
var respArray = JSON.parse(response.responseText).errors;
for(var i=0;i<=(Object.keys(respArray).length);i++){
 var optionss= 'Enter Answers.';
 if($("#answer"+i).val()==''){
      $('#answer'+i+' + span').html('');
      $('#answer'+i).after('<span class="' + errTextboxClass + '" style="color:#e03b3b">' + optionss+ '</span>'); 
      $('#answer'+i).focus();
    }
}
}

我正在检查直到响应错误长度。但在这些字段中给出值之前，验证工作正常（图 1）。但是，如果我如上图所示为前 2 个字段输入值，则不会显示第三个字段的验证消息（图 2）。因为在这个阶段，id 是 answer2，循环 'i' 值首先检查 0，然后检查 1。所以在循环 answer0 和 answer1 内有值，所以验证停止在那里。我也需要对下一个字段进行验证。提前致谢。

我的 HTML 和相应的附加函数

 <input class="form-control" name="answer0[]" id="answer0" placeholder="OPTION 1">
 <a class="add-option" onclick="AppendOption()"><img src="{{asset('admin/images/icn-add-option.png')}}" alt=""></a>


   function AppendOption(){
    var k=1;
    $('#appendOption').append('<div class="form-group row"><div class="col-md-4"><input class="form-control" name="answer0[]" id="answer'+k+'" placeholder="OPTION" ></div></div>');
    k++;
     }

Answer 1

在您的AppendOption 函数中，您设置k=1 一旦您到达第三个条目（选项2），这是一个无效选项。相反，您应该检测到这一点，更好的是在执行时仍使其对上下文敏感。我通过添加一个answer-item 类并检测我们有多少并使用该数字来做到这一点。

我将所有这些都包装在 <div id="options-container"> 中，这样我就有一个地方可以挂钩事件处理程序 (delegateTarget) https://api.jquery.com/event.delegateTarget/

我不会在这里使用 ID 而是使用类，但这不是问题的一部分，而是问题的原因。

$('.options-container').on('click','.add-option',function(event){
  let k= $(event.delegateTarget).find('.answer-item').length;
  $(event.delegateTarget).append('<div class="form-group row"><div class="col-md-4"><input class="form-control answer-item" name="answer0[]" id="answer' + k + '" placeholder="OPTION" ></div></div>');
});

function showValidation(response) {
  var respArray = JSON.parse(response.responseText).errors;
  for (var i = 0; i <= (Object.keys(respArray).length); i++) {
    var optionss = 'Enter Answers.';
    if ($("#answer" + i).val() == '') {
      $('#answer' + i + ' + span').html('');
      $('#answer' + i).after('<span class="' + errTextboxClass + '" style="color:#e03b3b">' + optionss + '</span>');
      $('#answer' + i).focus();
    }
  }
}

<div id="options-container">
  <input class="form-control answer-item" name="answer0[]" id="answer0" placeholder="OPTION 1">
  <a class="add-option"><img src="{{asset('admin/images/icn-add-option.png')}}" alt=""></a>
</div>

Answer 2

如果这些字段是必需的，则应将它们标记为必需，否则您将验证每个字段。在您的情况下，另一种验证方式可能如下所示

function showValidation(response) {
    var respArray = JSON.parse(response.responseText).errors;
    $('.form-group input.form-control').each(function(){
        if ($(this).val() == '') {
            $(this).next('span').html('');
            $(this).after('<span class="' + errTextboxClass + '" style="color:#e03b3b">' + optionss+ '</span>');
            $(this).focus();
        }
    });
}

由于我不知道showValidation() 的名称和位置，我无法进一步改进。

Answer 3

我尝试在输入数组循环中显示错误消息，我得到了答案。

    var result = document.getElementsByTagName("input");
    var optionss= 'Enter Answers.';
    for (var j = 0; j < result.length; j++) {
     if($("#answer"+j).val()==''){
      $('#answer'+j+' + span').html('');
      $('#answer'+j).after('<span class="' + errTextboxClass + '" style="color:#e03b3b">' + optionss+ '</span>'); 
      $('#answer'+j).focus();
    }