Question

我正在制作多页表格。在一些表格的页面上，我有一些问题，允许用户在需要添加作业或奖励等时动态添加输入。这就是我想做的事情/到目前为止我做过的事情。

我想做的事：

当用户动态添加字段时，我想验证这些字段以确保它们已被填写，并且它们不仅仅是尝试使用空输入移动到表单的下一页。
成功验证所有字段后，＆＃34;下一步＆＃34;页面底部的按钮，直到此点被禁用，将重新启用。

我所知道的如何做

在一些帮助下，我已经能够为未动态添加的输入（例如名字，姓氏）制定验证模式，我可以将同样的逻辑扩展到第一组输入不是动态添加的。我还研究了如何重新启用＆＃34; Next＆＃34;所有字段都很好的按钮。

我不知道该怎么做

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

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

＆＃13;

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");
    }
};

＆＃13;

 <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 -->

＆＃13;

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(...)创建的每个元素，您可以绑定到input元素的onchange事件，然后执行验证。

这里是updated version of your CodePen。

例如：

HTML

<div id="container">

</div>

的Javascript

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

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

container.appendChild(inputElement);

在这种情况下，我直接创建了输入元素，因此我可以访问其onchange属性，但您也可以轻松创建包装div并将inputElement附加到该属性。 / p>

注意：根据您希望激活验证的频率，您可以绑定到keyup事件，每次用户在键入时释放键时都会触发该事件盒子，IE：

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

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

2 个答案:

HTML

的Javascript