How to enable button when input field is not empty

Question

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.

Answer 1

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.computed(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 computed observables.

Answer 2

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.