When all fields are filled

Question

I use knockout.js to bind data. Usually there is a form in which some fields take a name, number, email address, etc. Assume that if any of the fields is empty and the save button is pressed, then this button goes to the disabled state. Until now, his working fine.

Now, if I fill in the empty fields, I want to turn on this button again, and I don’t know how to do it. Can you use any body, please help me how to do this?

Below is the js code

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

this is html code

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

I have fiddle also for the above js and 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;
}

, , , attr. , .