填写表单字段时按钮未启用

Question

我有一个表单和一个提交按钮。当所有字段都填满时，只有提交按钮将被启用，否则它将处于禁用状态。我指的是这个 question 但是当我在我的实现这个想法时项目然后它不工作。即使所有字段都已填充，该按钮始终处于禁用状态。我不知道错误发生在哪里。请帮助。

这是我的淘汰码。

self.newPatient = ko.asyncCommand({

     execute: function(complete) {
         var vm = {
                 name: ko.observable(""),
                 password: ko.observable(""),
                    address: ko.observable(""),
                    username: ko.observable("")
                };

                vm.isFormValid = ko.computed(function() {
                    return this.name() && this.password() && this.address() && this.username();
                }, vm);

                ko.applyBindings(vm);
        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();
     }
 });

这是保存按钮代码。

<button class="btn btn-primary"data-bind="command: $root.newPatient, activity: $root.newPatient.isExecuting,enable: $root.newPatient.isFormValid" >
                                                    <i class="icon-ok icon-white"></i> Save
                                                </button>

这是表格

<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,valueUpdate: 'keyup'" 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,valueUpdate: 'keyup'" data-required="true" data-trigger="change">
            </div>
        </div>
    </div> 

    <div class="control-group">
        <label class="control-label" for="inputIcon">Gender :</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="icon-hand-right"></i></span>
                <select class="span8" name="gender" data-bind="options: $root.genderOptions,value: gender,optionsCaption: 'Select Gender'" data-required="true" data-trigger="change">
                </select>
            </div>
        </div>
    </div> 
    <div class="control-group">
        <label class="control-label" for="inputIcon">Consultant :</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="cus-user_suit"></i></span>
                <select class="span8" name="consultant"   data-bind="options: $root.doctors,optionsText: function(item){return item.name},optionsValue:function(item){return item.username},selectedOptions: consultant,value:consultant" data-required="true" data-trigger="change">
                </select>
            </div>
        </div>
    </div>
     <div class="control-group">
        <label class="control-label" for="inputIcon">Username :</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: username" name="username,valueUpdate: 'keyup'" data-required="true" data-trigger="change" data-remote="${pageContext.request.contextPath}/isUserNameExists" data-remote-method="GET">
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputIcon">Password :</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="icon-hand-right"></i></span>
                <input class="span8" type="password" data-bind="value: password" name="password,valueUpdate: 'keyup'" data-required="true" data-trigger="change">
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputIcon">Mobile :</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="cus-phone"></i></span>
                <input class="span8"  type="text" data-bind="value: mobile,valueUpdate: 'keyup'" data-type="number" data-minlength="10"data-required="true" data-trigger="change" data-type="phone" name="mobile">
            </div>
        </div>
    </div> 

    <div class="control-group">
        <label class="control-label" for="inputIcon">Email address :</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="icon-envelope"></i></span>
                <input class="span8" type="text" data-bind="value: email,valueUpdate: 'keyup'" data-required="true" data-trigger="change" data-type="email" name="email">
            </div>
        </div>
    </div>  
     </form>

Answer 1

请尝试使用以下代码 sn-p。通过使用文件名和文件引用，您可以轻松了解如何为淘汰 MVVM 创建文件夹/文件结构。

test.html

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="Scripts/knockout-3.1.0.js" type="text/javascript"></script>
    <script src="ViewModels/testViewModel.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <input type="text" data-bind="value: EmpNo" />
        <input type="text" data-bind="value: EmpName" />
        <button data-bind="enable: EmpNo() != '' && EmpName() != '' ">
            Submit</button>
    </div>
    <script type="text/javascript">
        ko.applyBindings(new testViewModel());
    </script>
</body>
</html>

testViewModel.js

var testViewModel = function () {
    this.EmpNo = ko.observable("");
    this.EmpName = ko.observable("");
};

如果有任何问题，请告诉我。如果可能，则临时创建新文件并检查它。所以可能会知道它实际上是如何工作的。

Demo1

Demo2

Answer 2

问题是下面的代码 sn-p 只有在你的 asyncCommand 执行时才会执行。因此，您最终会得到一个与您的问题无关的表单。为了使其正常工作，请确保将执行处理程序之外的绑定设置 (ko.applyBindings) 移动到加载页面时执行的位置。

 var vm = {
                 name: ko.observable(""),
                 password: ko.observable(""),
                    address: ko.observable(""),
                    username: ko.observable("")
                };

                vm.isFormValid = ko.computed(function() {
                    return this.name() && this.password() && this.address() && this.username();
                }, vm);

                ko.applyBindings(vm);