JS輸入驗證提交已針對單獨的實例禁用

Question

我需要input每個實例並submit以獨立運行。 處理每個submit都連接到其自己的inputs集的多個實例的最佳方法是什么？

由於它們不相關，因此data-attributes是否是最佳解決方案？

 $(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

首選方式

我認為最好的解決方案是使用form tag，因為它只是為此用例HTML Forms創建的 。

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

您還可以在提交事件處理程序上綁定自定義表單，並以這種方式收集表單數據。

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

可能但方法更多

替代方法是創建您自己的函數，以從輸入中收集所有相關數據並合並一些合理的數據對象。

我很可能會通過提供所需的類來做到這一點-將我想立即收集的所有輸入歸因於例如。 <input type="text" class="submit-1" /> ，依此類推。 獲取具有給定類的所有元素，遍歷所有元素並將值保存到對象中。

這需要更多的工作，並且-tag -form給您開箱即用的方式進行一些不錯的驗證，而您自己必須這樣做。

Answer 2

我認為您對使用數據屬性的直覺在這里非常有用。

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 + "']");
  });
});

在下面的代碼中，當按下輸入按鈕時，它將獲取帶有相應“ input-set”標簽的所有輸入。