Validating form fields

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  isValidEmail: Ember.computed.match('emailAddress', /^.+@.+\..+$/),
  isDisabled: Ember.computed.not('isValidEmail'),
  
  // MY FAILING ATTEMPT TO GET MESSAGE LENGTH
  // messageLength: Ember.computed('message', function () {
  //   return this.get('message').length;
  // }),
  // isValidMessage: Ember.computed.gte(this.messageLength, 5),
  //isDisabled: Ember.computed.and('isValidEmail', 'isValidMessage'),

  actions: {
    saveInvitation() {
      alert(`Saving of the following email address is in progress: ${this.get('emailAddress')}`);
      this.set('responseMessage', `Thank you! We've just saved your email address: ${this.get('emailAddress')}`);
      this.set('emailAddress', '');
      setTimeout(() => { this.set('responseMessage', ''); }, 3000);
    }

  }  
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

templates.application.hbs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="content">
{{outlet}}
</div>

templates.index.hbs

<div class="form-group form-group-lg row">

  <div class="col-xs-12 text-center">
    <h1>Contact page</h1>
    <p class="lead">Hi, fancy sending us a message?</p>
  </div>

  <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    {{input type="email" value=emailAddress class="form-control" placeholder="Please type your e-mail address." autofocus="autofocus"}}
    <br>
    {{textarea class="form-control" placeholder="Your message. (At least 5 characters.)" rows="7" value=message}}
    <br>
    <button class="btn btn-primary btn-lg btn-block" disabled={{isDisabled}} {{action 'saveInvitation'}}>
      Request invitation
    </button>
    <br>
  </div>
</div>

{{#if responseMessage}}
  <div class="alert alert-success">{{responseMessage}}</div>
{{/if}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}