使用 Knockout 进行表单验证答案

【问题标题】：Form validation using Knockout使用 Knockout 进行表单验证
【发布时间】：2017-02-04 20:13:23
【问题描述】：

我在我的项目中使用了 knockoutJS。以下是代码sn-p：

<input class="form-control" id="name" type="text" style = "width:100%" placeholder = "Enter name" data-bind="event:{keyup: checkDetails}">

<select class="form-control" id="type" style = "width:100%">
      <option>Type 1</option>
      <option>Type 2</option>
      <option>Type 3</option>
      <option>Type 4</option>
 </select>

<input class="form-control" id="date" type="date" style = "width:100%" data-bind="event:{click: checkDetails}">

<button type="button" class="btn btn-primary" id = "add_goal" data-bind = "enable:formFilled">Add Goal</button>

<script type="text/javascript">
       function myViewModel() {
            var self = this;
            self.formFilled = ko.observable(false);
            self.checkDetails = function(){
                console.log("hello");
                if($("#name").val() != "" && $("#date").val() != ""){
                    self.formFilled = ko.observable(true);
                }
            };
            console.log(self.formFilled());
        }
        ko.applyBindings(new myViewModel());
</script>

共有三个字段，我只想在所有字段都填满后激活“添加目标”按钮。疑问是：我应该将哪个事件添加到 HTML5 日历中，为什么当我在“checkDetails”函数中将其设置为 true 时按钮没有被激活。

【问题讨论】：

标签： javascript jquery validation knockout.js

【解决方案1】：

formFilled 是一个 observable，所以你需要像一个函数一样设置它。

if($("#name").val() != "" && $("#date").val() != ""){
    self.formFilled(true);
}
else {
    self.formFilled(false);
}

您的data-bind="event:{click: checkDetails}"> 也在寻找点击事件，我想这应该更改为keyup。

【讨论】：