填写所有字段时启用按钮 [英] enabling button when all the fields are filled up

问题描述

我正在使用knockout.js进行数据绑定。实际上有一个表单，某些字段接受名称，数字，电子邮件等。如果任何一个字段未填充并且按下保存按钮，那么该按钮转到禁用状态。现在它正常工作。

I am using knockout.js for data binding.Actually there is a form which some fields accepting name,number,email etc.Suppose if any one of the field is not filled and the save button is pressed then that button goes to disabled state.Till now its working fine.

现在，如果我填空字段，那么我想再次启用该按钮，我不知道该怎么办。可以任何身体请帮我怎么做？

Now if I fill the empty fields then I want to enable that button again and I dont know how to do.Can any body please help me how to do?

以下是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。

I have a fiddle also for the above js and html.

推荐答案

这样的事情：

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。我没有测试过这个，但它应该让你开始朝着正确的方向前进。

First you disable the button, on each form element change you check if it is filled out and then you remove the disabled attr. I haven't tested this, but it should get you started in the right direction.

这篇关于填写所有字段时启用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！