在填写动态创建的必填字段之前，请禁用提交按钮

Question

I want to keep the submit button disabled until the required fields are being filled.

Firstly , I found some questions about this issue but the problem was i have some required fields and not required fields also i am creating these fields dynamically. Here is an example:

<input type="text" id="releaseartist" name="releaseartist" required="true" placeholder="Required Field"/>

Also i have input like that , this is how i am creating them dynamically,

var trackartistinput = document.createElement('input');
trackartistinput.setAttribute('type', "text");
trackartistinput.setAttribute('id', "trackartist" + i);
trackartistinput.setAttribute('name', "trackartist");
trackartistinput.setAttribute("required", true);
trackartistinput.setAttribute("placeholder", "Required Field");
trackartistinput.setAttribute("class", "required");

And this is my submit button :

<input type="submit" class="btn btn-primary" value="Submit" id="form-submit" onclick="return myConfirm();" />

Answer 1

you can check the count of required fields added in the document so far and based on the counts you can set the property of submit button to disabled or enabled.

you can count required class components as follow:

var numItems = $('.required').length

EDIT

to check if all the required class elements are filled you can check as follow:

var required_ele = document.getElementsByClassName('required');
var allfilled=true;
for (var i = 0; i < required_ele.length; ++i) {
    var item = required_ele[i];  
    if(item.value.length==0){
      allfilled=false;
    }
}
if(allfilled){
   document.getElementById("form-submit").disabled = false;
}
else{
  document.getElementById("form-submit").disabled = true;
}

Answer 2

• Start with button having disabled attribute set.
• Add change event listener to form element (assuming that is the parent of all input elements)
• in change handler check if all required fields are filled, if yes, enable submit button

This work well even if user remove value entered in required field later, submit button will become disabled again