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

Question

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

这是我在上尝试过但失败的CodePen

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