Question

我的文本框为：

 <input type="text" class="form-control textbox" data-bind="value: nameValue, , event: { 'keyup': checkIfTextBoxEmpty }" />

如上所示，我在文本框中使用了keyup事件。

淘汰赛的事件如下：

   self.checkIfTextBoxEmpty = function (data, event) {
       //To check if textbox is empty
       if(data.nameValue() == '')
        {
           //hide a span tag 
        }
    };

当用户没有输入任何值并按下我页面上的按钮时，我已经将验证器连接到此文本框，显示错误“字段是必需的”。

如果他们在文本框中输入了无效值，我会在我的按钮中单击，然后在文本框下方的范围内将其显示为错误。

问题出现在用户输入无效值并按下按钮时显示无效值错误，当他们删除在文本框中输入的值时，它会显示所需的字段错误以及无效值错误。

所以我将“keyup”事件绑定到文本框。在这里，我想检查值是否为空我将隐藏span标记，以便它只显示必需的字段错误。

但是在我的keyup事件中，data.nameValue（）总是未定义的，因此我无法检查它们输入的值。

这里还有什么需要做的。

感谢。

Answer 1

如上所示，我在文本框中使用了keyup事件。

你不应该。你根本不应该使用任何活动。使用the textInput binding和计算值。

function VM() {
  var self = this;

  self.nameValue = ko.observable('');
  
  self.nameIsEmpty = ko.computed(function () {
    return self.nameValue() == '';
  });
};

var vm = new VM();
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<input type="text" data-bind="textInput: nameValue">

<span data-bind="visible: nameIsEmpty">Field is required</span>

从长远来看，您应该学习Knockout-Validation plugin，而不是滚动自己的验证码。

Answer 2

Tomalak上面提到的答案是正确的接近方式。

有关如何使用活动的答案，您可以尝试以下代码。

 <input type="text" class="form-control textbox" data-bind="value: nameValue, 
 valueUpdate: 'value' , event: { 'keyup': checkIfTextBoxEmpty }" />

文本框事件绑定和文本框值

2 个答案: