我正在建立一个多页表单。在表单的一些页面上，我有一些问题，这些问题使用户可以在需要添加工作或奖励等情况下动态添加输入。这是我想做的事/到目前为止我做了什么。
我想做的事：
我知道该怎么做
在一些帮助下，我已经能够对未动态添加的输入（例如名字，姓氏）进行验证，并且可以将相同的逻辑扩展到未动态添加的第一组输入。一旦所有字段都正确，我还想出了如何重新启用“下一步”按钮的方法。
我不知道该怎么办
如何编写扩展简单验证测试逻辑的函数，以便还检查动态添加的迭代。
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 -->对于您使用制作的每个元素，您都document.createElement(...)可以绑定到onchange输入元素的事件，然后执行验证。
例如：
<div id="container">
</div>
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到该元素。
注意：根据触发验证的频率，您可以绑定到keyup事件，该事件在用户在输入IE的同时释放键时触发该事件：
inputElement.addEventListener("keyup", function(e){
console.log("Do validation!");
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句