We Keep Coding

Validating Dynamically Added Form Inputs - Vanilla JS

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.
What I Want to Do:
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.
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.
What I know How To Do
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.
What I do Not Know How To Do
How do I write a function that extends the logic of the simple validation test to also check for dynamically added iterations.
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 -->

Instead of trying to validate each individual input element, I would recommend trying to validate them all at once. I believe that is what your checkPage2 function is doing.
You can add the onBlur event handler or the onKeyUp event handler you are currently using to all added inputs to run your form wide validation. This has the effect of checking each individual form element if it is valid so you know for sure you can enable the submit button.
Lastly, when removeJob is called, you should also run the form wide validation. It would look something like this:
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();
};

For every element that you make with document.createElement(...), you can bind to the onchange event of the input element, and then perform your validation.
Here's an updated version of your CodePen.
For example:
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);
In this case I'm directly creating the input element so I have access to its onchange property, but you can easily also create a wrapping div and append the inputElement to that.
Note: Depending on the freqency in which you want the validation to fire, you could bind to the keyup event instead, which fires every time the user releases a key while typing in the box, IE:
inputElement.addEventListener("keyup", function(e){
console.log("Do validation!");
});

Observe Form Submission

In my application I need to submit forms via JavaScript. I know that I can do that with this code:
[...document.querySelectorAll('form')].forEach(form => {
form.addEventListener('submit', e => {
//doing the processing here
e.preventDefault();
})
})
From the server I get completely generated forms as HTML, which I inject into the DOM (or delete them from there), whenever necessary. By doing so, the registered event handlers stop to work, because the form element is either deleted or not registered.
Is it possible to register a global »Submission Listener«, comparable to that:
window.addEventListener('click' e => { … });
what will never be removed if the DOM changes, or will I have to register the submission handlers each time the DOM changes?
Is not a dublicate, because the mentioned delegation strategy is what I am looking for, but not for click events, for submission events instead.

You can definitely catch submit events as they bubble up, so what you want can be achieved by listening from a parent element that is always present as the dynamic forms are added and removed. I like doing this thing with a wrapper element with an ID, as opposed to listening a the body or html level. Here's a very simple example using just vanilla js. Codepen here: http://codepen.io/bsidelinger912/pen/RGbWYb
HTML:
<div id="form-wrapper">
<h2>Form 1</h2>
<form id="form1">
<input name="test" placeholder="enter something" />
<input type="submit" value="submit" />
</form>
<h2>Form 2</h2>
<form id="form2">
<input name="test" placeholder="enter something" />
<input type="submit" value="submit" />
</form>
</div>
<button id="form-adder">
+ Add a form
</button>
Javascript
var formWrapper = document.getElementById('form-wrapper');
// capture the submit event in the parent div
formWrapper.addEventListener("submit", function(e) {
e.preventDefault();
console.log('submit captured');
var thisForm = e.srcElement || e.originalTarget;
console.log('form id:' + thisForm.id);
console.log(thisForm.test.value);
});
// dynamically add divs and see we can still capture the submit
var divNum = 3;
function addDiv(e) {
e.preventDefault();
formWrapper.innerHTML += '<h2>Form ' + divNum + '</h2>\
<form id="form' + divNum + '">\
<input name="test" placeholder="enter something" />\
<input type="submit" value="submit" />\
</form>';
divNum++;
}
document.getElementById('form-adder').addEventListener('click', addDiv);

Change input value on tab

I'm coding a small web app to log team members work time. It all works well, except one thing. When you tab on a fieldset a new page opens with a form to change the time for that person. The first time you tab it works, but when you click on the next fieldset it changes all input fields with the name 'begin-time' ?
I think i'm missing something but I'm not sure what it is.
I have the following form;
<form id="time-form">
<fieldset>
<div class="row">
<input type="text" value="Jonh Doe" id="fullname" name="fullname" readonly="">
<div class="time">
<input type="text" value="00:00" id="begin-time" name="begin-time" readonly="">
<input type="text" value="00:00" id="end-time" name="end-time" readonly="">
</div>
</fieldset>
<fieldset>
<div class="row">
<input type="text" value="Jane Doe" id="fullname" name="fullname" readonly="">
<div class="time">
<input type="text" value="00:00" id="begin-time" name="begin-time" readonly="">
<input type="text" value="00:00" id="end-time" name="end-time" readonly="">
</div>
</fieldset>
</form>
with the new form 'on tab';
<form id="add-time">
<input type="time" name="begin_time">
<input type="time" name="end_time">
</form>
and the javascript;
$$('#time-form fieldset').tap(function() {
var beginTime = $(this).find("[name='begin-time']");
$('#add-time input[name=begin_time]').change(function() {
beginTime.val(this.value);
});
$$('.add-time').tap(function() {
$('#addTimePage').addClass('pt-page-moveToRightEasing pt-page-ontop');
$('#timePage').addClass('pt-page-moveFromLeft pt-page-current');
setTimeout(function () {
$('#timePage').removeClass('pt-page-moveFromLeft');
$('#addTimePage').removeClass('pt-page-moveToRightEasing pt-page-ontop pt-page-current');
}, 400);
});
});
edit: I have setup a simple fiddle of the problem.

Okay, so I noticed a few problems:
Your first .click() call was targeting ALL time-form fieldsets when it should have only been targeting input fields.
Your .change() and second .click() are called inside the first .click() meaning the new methods will be called multiple times (because each use of .click() and .change() adds on to the actual event.
Your submit button wasn't actually submitting anything. It was just hiding itself.
To fix this, I gave each fieldset a class name of .fieldset-time so they can easily be looped through. I added an onclick() event to each <fieldset> to easily manipulate the one (and its children) that was clicked.
Here's the new JavaScript code:
// invoked each time an input with the onclick() attribute is clicked
function editTime(obj) {
$("#addTimePage").fadeIn();
$(obj).attr("id", "active"); // set id to active so we know this is the one we want to change
}
$("#submit").click(function() {
// get the new beginning and end times set by the user
var newBeginTime = $("#add-time input[name=begin_time]").val();
var newEndTime = $("#add-time input[name=end_time]").val();
// loop through all elements with class .fieldset-time and find the active one
$(".fieldset-time").each(function() {
if ($(this).attr("id") == "active") {
$(this).attr("id", "");
$("input[name=begin-time]", this).val(newBeginTime);
$("input[name=end-time]", this).val(newEndTime);
return false; // break out of the .each() loop
}
});
// finally, clear and hide the add time box
$("#add-time input[name=begin_time], #add-time input[name=end_time]").val("");
$("#addTimePage").fadeOut();
});
And the new JSFiddle: http://jsfiddle.net/J4Hjf/7/
I hope that's what you were looking for. :)

get name of hidden form

What i want to do is get the name of the hidden form which in this case is named:6ca3787zz7n149b2d286qs777dd8357b, the problem is, that form name always changes, the only thing that is the same is its value, which is 1, well 99% of the time, the only thing that is 100% the same that i guess could be somehow used to retrieve the form name is:L2ZvcnVtcy8 which is just above it. I am also attempting to do this via running javascript manually on the browser (chrome), so having that in mind where the javascript code is run through the url bar like this javascript:codegoeshere, how can i get the form name, -->(6ca3787zz7n149b2d286qs777dd8357b)?
<form action="index.php?feature=xxxxxx" method="post" name="login">
<input type="submit" name="submit" class="button" value="Logout" />
<input type="hidden" name="option" value="username" />
<input type="hidden" name="task" value="logout" />
<input type="hidden" name="return" value="L2ZvcnVtcy8=" />
<input type="hidden" name="6ca3787zz7n149b2d286qs777dd8357b" value="1" /> </form>
</li>

Check all the solutions below in this fiddle.
Some possibilities:
Assuming there is only one element with the name login and that element is the <form>, you can use:
document.getElementsByName('login')[0].getElementsByTagName('input')[4].name
If the return <input> has a fixed name attribute, then this should work (the additional .nextSibling is because there is a text node between them):
document.getElementsByName('return')[0].nextSibling.nextSibling.name
If any other of of those <input>s has a fixed name, you can use (in the example I take the <input> with name=task):
document.getElementsByName('task')[0].parentNode.getElementsByTagName('input')[4].name);
If all you really have is that fixed value, you'll have to use a for loop through all the <input>s:
var lastResortName = (function () { for(var i=0, ipts = document.getElementsByTagName('input'), n = ipts.length; i < n; i++) { if (ipts[i].value === "L2ZvcnVtcy8=") return ipts[i+1].name; } })();
Note: If there are duplicated values for the mentioned name attributes, test with the index ([0], [1], [2] and so on) until you find the expected elements.

That's really easy if you use JQuery:
$('input[type="hidden"]:eq(3)').attr('name')
Here your code running:
http://jsfiddle.net/7CHYa/

AJAX function not being called with button onclick function

I have a simple form with 2 input fields and one button. When the button is clicked, the value of the 2 input fields should be sent to the AJAX function to be handled in a servlet. For some reason, the servlet is not being reached. Can anyone see why? I have an almost identical method working with a different form, and I can't see why this one isn't working.
Here is the HTML form code:
<div id="addCourses" class="hidden" align="center" >
<form id="addCourse" name="addCourse">
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" value="Add Course" onclick="addCourse(this.courseID.value, this.courseDesc.value);"/>
</form>
</div>
Here is the Script function:
<script type ="text/javascript">
function addCourse(id, descr)
{
var fluffy;
fluffy=new XMLHttpRequest();
fluffy.onreadystatechange=function()
{
if (fluffy.readyState==4 && fluffy.status==200)
{
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
}
</script>

Because this is the button and not the form
so
this.courseID.value
this.courseDesc.value
returns an error.
You should use
this.form.courseID.value
this.form.courseDesc.value
Second problem is you have a name clash. The form and function are named addCourse. It will lead to problems. Rename one of them to be different.
Running Example

When you use this, as in onclick="addCourse(this.courseID.value, this.courseDesc.value);", I think that would refer to the input element, and therefore the values aren't being passed correctly.

Bind your event handlers in javascript, where they should be, and you can avoid the issue entirely.
HTML:
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" id="addCourse" value="Add Course"/>
JS:
document.getElementById('addCourse').onclick = function () {
var fluffy = new XMLHttpRequest();
var id = document.getElementById('courseID').value;
var descr = document.getElementById('courseDesc').value;
fluffy.onreadystatechange=function() {
if (fluffy.readyState==4 && fluffy.status==200) {
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
};
As epascarello pointed out, you need to change the ID of your form as having two elements with the same ID is not allowed and will cause unpredictable javascript behavior.

Try a fluffy.close; after the if ready state expression.