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”标签的所有输入。