I have a requirement in which there is a form and if all the fields are filled then only submit button will be enabled else the submit button will be in disabled state.

This fiddle works fine for 1 input field:

<button data-bind="enable: my">My Button</button>
<input type="text" name="hi" data-bind="value:my" />

ko.applyBindings({ my: ko.observable() });

However, I don't know how to do this for multiple input fields like as in this fiddle. If there are some 10 input fields then how to enable the submit button if and only if all the fields are filled up.

I have a requirement in which there is a form and if all the fields are filled then only submit button will be enabled else the submit button will be in disabled state.

This fiddle works fine for 1 input field:

<button data-bind="enable: my">My Button</button>
<input type="text" name="hi" data-bind="value:my" />

ko.applyBindings({ my: ko.observable() });

However, I don't know how to do this for multiple input fields like as in this fiddle. If there are some 10 input fields then how to enable the submit button if and only if all the fields are filled up.

• javascript
• jquery
• knockout.js

• Validation: github./Knockout-Contrib/Knockout-Validation – Anders Commented Apr 16, 2014 at 12:18
• @Anders Thanks for the useful link but I am already using parsley.js for form validation – SpringLearner Commented Apr 16, 2014 at 12:20
• @KyleMit Thanks for making my post look better – SpringLearner Commented Apr 16, 2014 at 12:21
• OK, havent worked with it. Hook up the button to its valid state then – Anders Commented Apr 16, 2014 at 12:23
• 1 Since you're already using parsley.js (you should have mentioned this in the original question), you might want to look in to the knockout-parsley project which integrates the two: github./gdandar/Knockout-Parsley – PatrickSteele Commented Apr 16, 2014 at 12:30

2 Answers 2

HTML

<button data-bind="enable: isFormValid">My Button</button>
<input type="text" data-bind="value: text1, valueUpdate: 'keyup'" />
<input type="text" data-bind="value: text2, valueUpdate: 'keyup'" />
<input type="text" data-bind="value: text3, valueUpdate: 'keyup'" />
<input type="text" data-bind="value: text4, valueUpdate: 'keyup'" />

JS:

var vm = {
    text1: ko.observable(""),
    text2: ko.observable(""),
    text3: ko.observable(""),
    text4: ko.observable("")
}

vm.isFormValid = ko.puted(function() {
    return this.text1() && this.text2() && this.text3() && this.text4();
}, vm);

ko.applyBindings(vm);

See updated JSFiddle. The key to solving viewmodel inter-property dependencies is Knockout's puted observables.

You could use JQuery to solve this, by doing the following:

HTML Markup:

<button id="my" type="button" disabled="true">My Button</button>
<input id="hi" type="text" name="hi" />

JQuery Script:

if (allFields == valid) {
    $('#my').prop('disabled', false);
}

That should make your life a whole lot easier. Let me know if not.