Question

我需要input和submit的每个实例独立运作。处理多个实例的最佳方法是什么，其中每个submit都连接到inputs？

由于它们不相关，data-attributes会是最好的解决方案吗？

＆＃13;

$(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);
  }
}

＆＃13;

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

＆＃13;

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为您提供了一个很好的验证，您可以自己这样做。

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”标记获取所有输入。

针对单独的实例禁用JS输入验证提交

2 个答案:

首选方式

可能但方法更多螺栓