How to disable a button until all mandatory fields have been filled out?


#1

I have been working on an Emberjs app and its just been 1 week with it so far, hence apologies if I asked a very basic question upfront.

Currently the page is having some fields which are mandatory(however due to an autosave feature, we don’t have backend validation from the JSON API for it), and then I have a submit button.

I wish to disable the submit button until all the required inputs have been set.


#2

I 've used ember-changeset and ember-changeset-validations in a few projects for this kind of thing.


#3

In addition to the addons that @Loz described the basic “no frills” Ember approach would probably be something like:

  1. bind all your form fields to individual props on your controller/component OR to a model record
  2. use some combination of computed properties for validation (could use one for each form field, or just one giant one for all of them). If you do multiple then you should have a single computed property (e.g. “formValid” or something) that uses the and macro:
formValid: and('nameValid', 'emailValid', 'ssnValid', dobValid'),

and if you do one giant CP it can look somehing like this:

formValid: computed('nameValue', 'emailValue', 'ssnValue', 'dobValue', function() {
  // return whether or not all of the values are valid
}),
  1. Since you want to disable the button if the form is NOT valid, you could make another CP to reverse the value of isValid, or you could use ember truth helpers in your template (e.g. (not formValid)). The CP method would look like this:
formInvalid: not('formValid'),
  1. bind the return value of “formInvalid” CP (or whatever you choose to call it) to your submit button (or use the not helper with the formValid CP):
<button {{action 'submit'}} disabled={{this.formInvalid}}

EDIT: For more information see a couple sections in the guides…