当所有字段填写完毕时启用按钮

Question

我正在使用knockout.js进行数据绑定。实际上，有一个表单，其中一些字段接受名称、数字、电子邮件等。假设如果任何一个字段没有填写，保存按钮将变为禁用状态。到目前为止它工作得很好。

现在，如果我填写空白字段，则希望再次启用该按钮，但我不知道怎么做。有人可以帮帮我吗？

以下是js代码：

self.newPatient = ko.asyncCommand({

    execute: function (complete) {
        var isValid = $('#addPatientForm').parsley('validate');
        if (isValid) {
            var patientJson = ko.toJSON(self.patient());
            formdata.append("json", patientJson);
            //self.enableButton(false); 
            var imagepath = $.ajax({
                url: projectUrl + "newPatient",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    formdata = new FormData();
                    imagepath = res;
                    var length = self.patients().length;
                    var patient = self.patient();
                    //  self.enableButton(true); 
                }
            });
            $('.alert-patient-success').show();
            self.patients.removeAll();
            self.getPatients();
            /* $.when(self.patients.push(self.patient()),self.patient(new Patient()),self.dirtyFlag1().reset(),$('#patientTabs a:last').tab('show')) 
.always(complete);*/
        }
    },
    canExecute: function (isExecuting) {
        return !isExecuting && isDirty() && isValid();
    }
});

这是HTML代码

<script id="patientMetadataTemplate" type="text/html"> 
<form id="addPatientForm" data-validate="parsley"> 
<div class="control-group"> 
<label class="control-label" for="inputIcon">Name :</label> 
<div class="controls"> 
<div class="input-prepend" > 
<span class="add-on"><i class="icon-hand-right"></i></span> 
<input class="span8" type="text" data-bind="value: name" data-required="true" data-trigger="change" name="name"> 
</div> 
</div> 
</div> 
<div class="control-group"> 
<label class="control-label" for="inputIcon">Address :</label> 
<div class="controls"> 
<div class="input-prepend"> 
<span class="add-on"><i class="icon-hand-right"></i></span> 
<input class="span8" name="address" type="text" data-bind="value: address" data-required="true" data-trigger="change"> 
</div> 
</div> 
</div> 

我有一个针对上述JS和HTML的演示程序。

- SpringLearner

---

1. 添加一个处理程序，当任何输入发生更改时触发
2. 在该处理程序中，检查所有字段是否有值
3. 启用提交按钮 请参阅此链接：https://dev59.com/M3E95IYBdhLWcg3wEpzo

- Ruben Verschueren

Answer 1

类似这样的内容：

var formCompleted = false;
$('input[type="submit"]').attr('disabled','disabled');

$(":text, :file, :checkbox, select, textarea").change(function() {
  formCompleted = validateForm();   
  if(formCompleted){
    $('input[type="submit"]').removeAttr('disabled');
  }
});

function validateForm() {
  var isValid = true;
  $('.form-field').each(function() {
    if ( $(this).val() === '' )
      isValid = false;
    });
  return isValid;
}

首先禁用按钮，在每个表单元素更改时检查是否填写，然后删除disabled属性。我没有测试过这个方法，但它应该能帮助你朝着正确的方向前进。

- Ruben Verschueren

---

你使用了 form-field，请问这是指哪一个？ - SpringLearner

这是一个你应该添加到每个表单字段的类。这是获取每个表单元素的另一种方式。 刚刚意识到我没有链接到那个页面，所以我从这里“偷”了那个函数：https://dev59.com/pGMk5IYBdhLWcg3w2ReT - Ruben Verschueren

问题出在我的项目中使用了Knockout DirtyFlag，因此出现了这种情况。如果我使用jQuery代码，则按钮会被禁用，但是当我按下按钮时，控制权不会转到self.newPatient = ko.asyncCommand({....}。 - SpringLearner

你不能从jquery代码中调用knockout功能吗？我没有使用过knockout，所以我会把“有用”的评论留给其他人 :-) - Ruben Verschueren