Dynamic button enable knockout js based on error group

Question

I have a text box and a button. When the text box is empty, I need the button to be disabled and when I start typing in the text box, I want the button to be enabled.

Currently, after inputing some text in the text box, the button is enabled the moment I focus out of the text box. But I want this to be enabled the moment is text box is not empty. I am using knockout.js and both my text box and the button are observables. I have nore than 1 text field and I want to enable if all fields are not empty. If any field is empty, without loosing focus, I want to disable the button Here's my code:

var email = ko.observable({ emailField: ko.observable().extend({ email:
true, required: { param: true, message: FILL_FIELD } })), enableButton
 = ko.observable(), errorGroup = ko.validation.group([emailField]);

<input type="text" data-bind="value:emailField" />
<button data-bind="enable: enableButton>Press Next to enter password</button>

Answer 1

You have two options:

• Use textInput for KO 3.2.0 and higher; or
• Use value alongside valueUpdate: 'afterkeydown' for lower versions;

Both make sure your view model is updated immediately after key presses, cascading to other bindings like enable.