验证动态添加的表单输入-Vanilla JS

Question

我正在建立一个多页表单。 在表单的一些页面上，我有一些问题，允许用户在需要添加工作或奖励等情况下动态添加输入。 这是我想做的事/到目前为止我做了什么。

我想做的事：

1. 当用户动态添加字段时，我想验证这些字段以确保已填写它们，而不仅仅是使用空白输入尝试移至表单的下一页。
2. 成功验证所有字段后，将重新启用页面底部的“下一步”按钮，直到该点被禁用。

我知道该怎么做

在一些帮助下，我能够对未动态添加的输入（例如，名字，姓氏）进行验证，并且可以将相同的逻辑扩展到未动态添加的第一组输入。 一旦所有字段都正确，我还想出了如何重新启用“下一步”按钮的方法。

我不知道该怎么办

如何编写扩展简单验证测试逻辑的函数，以检查动态添加的迭代。

http://codepen.io/theodore_steiner/pen/gwKAQX

 var i = 0; function addJob() { //if(i <= 1) //{ i++; var div = document.createElement("div"); div.innerHTML = '<input type="text" class="three-lines" placeholder="School Board" name="schoolBoard_'+i+'"> <input type="text" class="three-lines" placeholder="Position" name="position_'+i+'"> <input type="date" class="three-lines" name="years_'+i+'"> <input type="button" value="-" onclick="removeJob(this)">'; document.getElementById("employmentHistory").appendChild(div); //} } function removeJob(div) { document.getElementById("employmentHistory").removeChild(div.parentNode); i--; }; function checkPage2() { var schoolBoard_1 = document.getElementById("schoolBoard_1").value; if(!schoolBoard_1.match(/^[a-zA-Z]*$/)) { console.log("something is wrong"); } else { console.log("Working"); } }; 

  <div id="page2-content"> <div class="input-group" id="previousTeachingExperience"> <p class="subtitleDirection">Please list in chronological order, beginning with your most recent, any and all full-time or part-time teaching positions you have held.</p> <div class="clearFix"></div> <label id="teachingExpierience">Teaching Experience *</label> <div id="employmentHistory"> <input type="text" class="three-lines" name="schoolBoard_1" id="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='School Board'" onfocus="this.placeholder=''" onkeyup="checkPage2()" /> <input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" onkeyup="checkPage2()" /> <input type="date" class="three-lines" name="years_1" /> <input type="button" name="myButton" onclick="addJob()" value="+" /> </div> </div><!--end of previousTeachingExperience Div --> 

Answer 1

我建议不要尝试一次验证所有输入元素，而不是尝试验证每个单独的输入元素。 我相信这就是您的checkPage2函数正在执行的操作。

您可以将当前使用的onBlur事件处理程序或onKeyUp事件处理程序添加到所有添加的输入中，以运行表单范围的验证。 这具有检查每个单独的表单元素是否有效的作用，因此您可以确定可以启用提交按钮。

最后，当调用removeJob时，您还应该运行表单范围的验证。 它看起来像这样：

function addJob()
{
    i++;
    var div = document.createElement("div");
    div.innerHTML = '<input type="text" class="three-lines" placeholder="School Board" name="schoolBoard_'+i+'" onkeyup="checkPage2()"> <input type="text" class="three-lines" placeholder="Position" name="position_'+i+'" onkeyup="checkPage2()"> <input type="date" class="three-lines" name="years_'+i+'" onkeyup="checkPage2()"> <input type="button" value="-" onclick="removeJob(this)">';

    document.getElementById("employmentHistory").appendChild(div);
}

function removeJob(div)
{
    document.getElementById("employmentHistory").removeChild(div.parentNode);
    i--;
    checkPage2();
};

Answer 2

对于使用document.createElement(...)制作的每个元素，可以绑定到输入元素的onchange事件，然后执行验证。

这是您的CodePen的更新版本 。

例如：

的HTML

<div id="container">

</div>

Java脚本

var container = document.getElementById("container");
var inputElement = document.createElement("input");

inputElement.type = "text";
inputElement.onchange = function(e){
    console.log("Do validation!");
};

container.appendChild(inputElement);

在这种情况下，我直接创建了input元素，因此可以访问其onchange属性，但是您也可以轻松地创建一个包装div并将inputElement追加到该inputElement 。

注意：取决于触发验证的频率，您可以绑定到keyup事件，该事件在用户在IE框中键入内容时每次释放键时都会触发：

inputElement.addEventListener("keyup", function(e){
    console.log("Do validation!");
});