Validating Dynamically Added Form Inputs - Vanilla JS
<p>I'm building a multipage form.  On a few of the form's pages, I have questions that allow the user to add inputs dynamically if they need to add a job, or an award, etcetera. Here's what I'd like to do/what I have done so far.</p>

<p><strong><em>What I Want to Do:</em></strong></p>

<ol>
<li>As the user adds fields dynamically, I want to validate those fields to make sure they have been filled in, and they are not just trying to move to the next page of the form with empty inputs.</li>
<li>After all the fields are successfully validated, a "Next" button at the bottom of the page, which up until this point was disabled, will become reenabled.</li>
</ol>

<p><strong><em>What I know How To Do</em></strong></p>

<p>With some help, I've been able to workout a validation pattern for the inputs that are not dynamically added (such as First Name, Last Name) and I can extend this same logic to the first set of inputs that are not added dynamically. I have also worked out how to re-enable the "Next" button once all fields are good.</p>

<p><strong><em>What I do Not Know How To Do</em></strong></p>

<p>How do I write a function that extends the logic of the simple validation test to also check for dynamically added iterations.</p>

<p><a href="http://codepen.io/theodore_steiner/pen/gwKAQX" rel="nofollow">http://codepen.io/theodore_steiner/pen/gwKAQX</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var i = 0;
function addJob()
{
   
   //if(i &lt;= 1)
   //{
        i++;
      var div = document.createElement("div");
      div.innerHTML = '&lt;input type="text" class="three-lines" placeholder="School Board" name="schoolBoard_'+i+'"&gt; &lt;input type="text" class="three-lines" placeholder="Position" name="position_'+i+'"&gt; &lt;input type="date" class="three-lines" name="years_'+i+'"&gt; &lt;input type="button" value="-" onclick="removeJob(this)"&gt;';
    
    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");
    }
};
  </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="page2-content"&gt;
                &lt;div class="input-group" id="previousTeachingExperience"&gt;
                    &lt;p class="subtitleDirection"&gt;Please list in chronological order, beginning with your most recent, any and all full-time or part-time teaching positions you have held.&lt;/p&gt;
                    &lt;div class="clearFix"&gt;&lt;/div&gt;
                    &lt;label id="teachingExpierience"&gt;Teaching Experience *&lt;/label&gt;
                    &lt;div id="employmentHistory"&gt;
                        &lt;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()" /&gt;
                        &lt;input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" onkeyup="checkPage2()" /&gt;
                        &lt;input type="date" class="three-lines" name="years_1" /&gt;
                        &lt;input type="button" name="myButton" onclick="addJob()" value="+" /&gt;
                    &lt;/div&gt;     
                &lt;/div&gt;&lt;!--end of previousTeachingExperience Div --&gt;</code></pre>
</div>
</div>
</p>