Add validations on dynamically created form with Javascript

Question

I created a form dynamically with javascript. Now I have to add validations on the form (only mandatory validations) on click of the button which is also dynamically created. Now the issue I am facing is that whenever I try to add addEventListener on the button exactly after creating it, it is giving me error. ( function init() {

    console.log("div created"); 

    // create a new div element
    var newDiv = document.createElement("div");
    newDiv.id = "registration_form";

    var createForm = document.createElement("form");
    newDiv.appendChild(createForm);

    var heading = document.createElement("h2");
    heading.innerHTML = "Registration Form";
    createForm.appendChild(heading);

    var linebreak = document.createElement('br');
    createForm.appendChild(linebreak);

    createElement(createForm, 'label','','','Name: ');
    createElement(createForm, 'text', 'dname', '','');
    createSpanTag(createForm,'nameError');
    breakTag(createForm);breakTag(createForm);
    createElement(createForm, 'label','','','Email: ');
    createElement(createForm, 'email', 'email', '','');
    createSpanTag(createForm,'emailError');
    createElement(createForm, 'button','Validate','Validate','');
    document.getElementsByTagName('button')[0].addEventListener('click',validate());
    document.getElementsByTagName('body')[0].appendChild(newDiv);

}
)();

function createElement(formElement,type,name,value, placeholder) {
if(type=='label'){
    var element=document.createElement(type);
    if(name!='' && value!=''){
        element.setAttribute('name',name);
        element.setAttribute('value',value);
    }
    element.innerHTML=placeholder;
    formElement.appendChild(element);
} else {
    var element=document.createElement('input');
    if(type!=''){
        element.setAttribute('type',type);
    }
    if(name!=''){
        element.setAttribute('name',name);
    }
    if(value!=''){
        element.setAttribute('value',value);
    }
    if(placeholder!=''){
        element.setAttribute('placeholder',placeholder);        
    }
    formElement.appendChild(element);
} 

}

function breakTag(createForm){
createForm.appendChild(document.createElement('br'));
}

function validate(){

}
function createSpanTag(createForm, id){
    var element=document.createElement('span');
    element.setAttribute('id',id);
    createForm.appendChild(element);
}

Answer 1

The second argument of addEventListener needs to be a function. Change ...

document.getElementsByTagName('button')[0].addEventListener('click',validate())

to ...

document.getElementsByTagName('button')[0].addEventListener('click',validate);

Answer 2

Since your tag name is input , not button . So use input in parameter of the function getElementsByTagName() and then loop through all nodes and find node with type = button .

Try change this line:

document.getElementsByTagName('button')[0].addEventListener('click',validate());

to:

    var nodeList = document.getElementsByTagName("input");

    for (var i = 0; i < nodeList.length; i++)
    {
       if (nodeList[i].getAttribute("type") == "button") {
       {
          nodeList[i].addEventListener('click',validate);
       }
    }