javascript - 当所有字段都填满时启用按钮

Question

我正在使用 knockout.js 进行数据绑定(bind)。实际上有一个表单，其中一些字段接受名称、号码、电子邮件等。假设如果任何一个字段未填写并且按下保存按钮，则该按钮转到禁用状态。到现在它工作正常。

现在，如果我填写空白字段，然后我想再次启用该按钮，但我不知道该怎么做。任何人都可以帮我怎么做吗？

下面是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> 

我有一个 fiddle也适用于上述js和html。

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

首先禁用按钮，在每个表单元素更改时检查它是否已填写，然后删除禁用的属性。我还没有对此进行测试，但它应该能让您朝着正确的方向开始。