基于自定义属性的条件 jQuery 验证

Question

我想根据输入和按钮之间匹配的自定义数据属性有条件地启用/禁用按键更改。我只用一个输入解决了它，但似乎当我在组合中添加另一个输入时，按钮似乎没有启用。 此外，我有预感这是因为 .each() 但我无法确定。

Here's the CodePen I've tried and failed on

var validation = $('[data-validation]');
var validate;

validation.on("change keyup", function (e) {
  let validated = true;
  validation.each(function () {
    let value = this.value;
    validate = $(this).data('validation');
    
    if (value && value.trim() != "") {
      validated = false;
    } else {
      validated = true;
      return false;
    }
  });
  
  if (validated) {
    $('[data-validator=' + validate + ']').prop("disabled", true);
  } else {
    $('[data-validator=' + validate + ']').prop("disabled", false);
  }
});

Answer 1

这里的关键是只为更改的输入运行验证代码。与您所拥有的相反，即为所有输入运行。

要获取实际更改的输入，您可以利用传递给事件处理程序的事件对象的.target 属性。

或者，如果您完全删除 validation.each()，它也可以工作。这是因为jQuery 将this 的值设置为实际触发事件的DOM 元素（不是jQuery 包装的元素）。

var validation = $("[data-validation]");
var validate;

validation.on("change keyup", function (e) {
  let validated = true;
  let value = this.value;
  validate = $(this).data("validation");

  if (value && value.trim() != "") {
    validated = false;
  } else {
    validated = true;
    return false;
  }

  if (validated) {
    $("[data-validator=" + validate + "]").prop("disabled", true);
  } else {
    $("[data-validator=" + validate + "]").prop("disabled", false);
  }
});