如何验证javascript中动态字段的常见错误div

我正在尝试添加多个图像。我已经对图像应用了验证（只接受.jpg、.jpeg文件）

当我单击submit时，它只验证第一个文件，不验证其他文件。当文件格式无效时，我希望为每个文件提供错误消息

HTML代码：

<div class="form-group">
  <label class="form-label"><strong>Product Image</strong>
  </label>
  <span class="tips"></span>
  <div class="controls">
    <input type="file" id="file" name="uploadFileForImage" class="form-control">
  </div>
  <div id="imageError" class="validationError" style="color:red"></div>
</div>
<div id="productImageDivId"></div>
<div class="form-group">
  <div id="productImageAddMoreButtonId">
    <button onclick="addFileConrol('productImageDivId','productImageAddMoreButtonId','uploadFileForImage',1)"
            class="btn btn-primary">Add More Files
    </button>
  </div>
</div>

<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12 table-responsive">
    <div class="col-sm-9 col-sm-offset-3">
      <div class="pull-right">
        <button class="btn btn-info m-b-10" onclick="return validateProductForm()">Submit</button>
        <button type="reset" class="btn btn-danger m-b-10">Reset</button>
      </div>
    </div>
  </div>
</div>

用于添加更多文件的通用函数-

function addFileConrol(fileCtrlAppendDivId,AddMoreButtonDivId,fileName,index){
  //alert("file name : "+fileName);
  var html="<div id=\'"+fileCtrlAppendDivId+index+"\' class=\'form-group\'>"
           +"\n  <div class=\'controls\' style=\'width: 87%; float: left;\'>"
           +" <input type=\'file\' id=\'moreFile\' class=\'form-control\' name=\'"+fileName+"\'>"
           +"\n  </div>"
           +"\n  <div class=\'controls\'>"
           +"\n    <div><a class=\'delete btn btn-danger\' onclick=\'hideDiv(\""+fileCtrlAppendDivId+index+"\")\'\n            style=\' margin-left: 3px; width: 55px;height: 43px;\'><i class=\'fa fa-times-circle\'\n                                                                    style=\'margin-left: -4px; margin-top: 6px;\'></i>\n    </a></div>"
           +"\n    <div id=\'moreError\' class=\'validationError\' name=\'"+fileName+"\' style=\'color:red\'></div>"
           +"\n  </div>"
           +"\n</div>";
  $('#'+fileCtrlAppendDivId).append(html);
  html="<button onclick='addFileConrol(\""+fileCtrlAppendDivId+"\",\""+AddMoreButtonDivId+"\",\""+fileName+"\","+(index+1)+")' class='btn btn-primary'>Add More Files</button>";
  $('#'+AddMoreButtonDivId).html(html);
}

函数addFileConrol（fileCtrlAppendDivId、AddMoreButtonDivId、文件名、索引）{
//警报（“文件名：”+文件名）；
var html=“”
+“\n”
+" "
+“\n”
+“\n”
+“\n\n”
+“\n”
+“\n”
+“\n”；
$（'#'+fileCtrlAppendDivId）.append（html）；
html=“添加更多文件”；
$（'#'+AddMoreButtonDivId）.html（html）；
}

我想对每个文件验证使用

id=“morererror”

（在

addFileControl（）

函数中定义）

---

提前感谢。

改进了格式。问题仍然有点混乱您是否从某人处复制了此代码？id必须是整个文档的唯一id，因此如果您有多个

id=“morererror”

代码，则您的代码将无法工作。谢谢。问题是我想添加多个图像。如果我选择其他文件格式，然后选择.jpg、.jpeg，它会给我一个错误。因此，它只验证第一个和第二个文件，而不验证其他文件。我希望id=“moreError”验证我添加的每个文件。有关更多说明，请参阅快照@弗兰克万维克诺。这是我自己的代码@Refilon

function addFileConrol(fileCtrlAppendDivId,AddMoreButtonDivId,fileName,index){
  //alert("file name : "+fileName);
  var html="<div id=\'"+fileCtrlAppendDivId+index+"\' class=\'form-group\'>"
           +"\n  <div class=\'controls\' style=\'width: 87%; float: left;\'>"
           +" <input type=\'file\' id=\'moreFile\' class=\'form-control\' name=\'"+fileName+"\'>"
           +"\n  </div>"
           +"\n  <div class=\'controls\'>"
           +"\n    <div><a class=\'delete btn btn-danger\' onclick=\'hideDiv(\""+fileCtrlAppendDivId+index+"\")\'\n            style=\' margin-left: 3px; width: 55px;height: 43px;\'><i class=\'fa fa-times-circle\'\n                                                                    style=\'margin-left: -4px; margin-top: 6px;\'></i>\n    </a></div>"
           +"\n    <div id=\'moreError\' class=\'validationError\' name=\'"+fileName+"\' style=\'color:red\'></div>"
           +"\n  </div>"
           +"\n</div>";
  $('#'+fileCtrlAppendDivId).append(html);
  html="<button onclick='addFileConrol(\""+fileCtrlAppendDivId+"\",\""+AddMoreButtonDivId+"\",\""+fileName+"\","+(index+1)+")' class='btn btn-primary'>Add More Files</button>";
  $('#'+AddMoreButtonDivId).html(html);
}