动态按钮启用基于错误组的挖空 js

Dynamic button enable knockout js based on error group

本文关键字：js 错误 启用 按钮 于错误 动态      更新时间：2023-09-26

我有一个文本框和一个按钮。当文本框为空时，我需要禁用该按钮，当我开始在文本框中键入时，我希望启用该按钮。

目前，在文本框中输入一些文本后，当我将焦点从文本框中移出时，该按钮将启用。但是我希望在文本框不为空的那一刻启用此功能。我正在使用挖空.js我的文本框和按钮都是可观察的。我有超过 1 个文本字段，如果所有字段都不为空，我想启用。如果任何字段为空，而不会失去焦点，我想禁用按钮这是我的代码：

var email = ko.observable({ emailField: ko.observable().extend({ email:
true, required: { param: true, message: FILL_FIELD } })), enableButton
 = ko.observable(), errorGroup = ko.validation.group([emailField]);

<input type="text" data-bind="value:emailField" />
<button data-bind="enable: enableButton>Press Next to enter password</button>

您有两个选择：

  • 将textInput用于 KO 3.2.0 及更高版本;或
  • 对于较低版本，value与valueUpdate: 'afterkeydown'一起使用;

两者都确保您的视图模型在按键后立即更新，并级联到其他绑定，如 enable 。

使问题复杂化的是，您正在进行验证，并且您希望验证等到焦点退出，因此让值随着键入而不断更新不是解决方案。

相反，您可以单独监视input事件，以跟踪哪些必填字段为空。 watchForEmpty是一个工厂，它接受一个可观察量并返回一个 Knockout 事件处理程序。它设置空列表的初始状态，事件处理程序维护它。当空列表没有条目时，将启用该按钮。

vm = {
  empties: ko.observableArray(),
  thing: ko.observable('prefilled'),
  thing2: ko.observable(),
  watchForEmpty: function(observable) {
    var initVal = observable();
    if (initVal === '' || initVal === undefined) {
      vm.empties.push(observable);
    }
    return function(context, event) {
      var el = event.target;
      if (el.value === '') {
        vm.empties.push(observable);
      } else {
        vm.empties.remove(observable);
      }
    };
  }
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="value: thing, event: {input: watchForEmpty(thing)}" />
<input data-bind="value: thing2, event: {input: watchForEmpty(thing2)}" />
<button data-bind="enable: empties().length === 0">Go</button>
<div data-bind="text: thing"></div>
<div data-bind="text: thing2"></div>

相关文章：