JS input validation submit disabled for separate instances

Question

I need each instance of input and submit to operate independently. What is the best way to handle multiple instances where each submit is connected to it's own set of inputs ?

Since they are unrelated, would data-attributes be the best solution?

 $(document).ready(function() { validate(); $('input').on('keyup', validate); }); function validate() { var inputsWithValues = 0; var myInputs = $("input:not([type='submit'])"); myInputs.each(function(e) { if ($(this).val()) { inputsWithValues += 1; } }); if (inputsWithValues == myInputs.length) { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item1"> <div><input type="text" name="name" autocomplete="off" required/></div> <input type="submit" value="Submit 1" /> </div> <div class="item2"> <div><input type="text" name="name" autocomplete="off" required/></div> <div><input type="text" name="name" autocomplete="off" required/></div> <input type="submit" value="Submit 2" /> </div> 

Answer 1

Preferred way

I think best solution would be use form -tag as it is created for just this use case HTML Forms .

<form id="form-1">
  <input type="text"/>
  <input type="submit>
</form>    
<form id="form-2">
  <input type="text"/>
  <input type="submit>
</form>

You can also bind custom Form on submit event handlers and collect form data this way.

$('#form-1').on('submit', function(event){ 
  event.preventDefault(); // Prevent sending form as defaulted by browser
  /* Do something with form */ 
});

Possible but more bolt on method

Alternative methods to this would be to create your own function's for collecting all relevant data from inputs and merge some resonable data object.

I would most likely do this with giving desired class -attribute all inputs I would like to collect at once eg. <input type="text" class="submit-1" /> and so on. Get all elements with given class, loop through all them and save values into object.

This requires much more work tho and form -tag gives you some nice validation out of the box which you this way have to do yourself.

Answer 2

I think your intuition about using data attributes works great here.

var allButtons = document.querySelectorAll("input[type=submit]");

allButtons.forEach(button => {
  button.addEventListener("click", () => {
    var inputSet = button.getAttribute("data-input-set");
    var inputs = document.querySelectorAll("input[type='text'][data-input-set='" + inputSet + "']");
  });
});

In the following code, when an input button is pressed, it will fetch all the inputs with the corresponding "input-set" tag.