mardi 24 mai 2016

'Send' button remains active while conditions aren't satisfied

I'm learning Ember.js and now I'm stuck with a little contact form. I have two fields, one for email, another for the message, and I've set some validations for them. Unless the validations are satisfied, the 'Send' button must be disabled. Also, when everything is OK and user sends a message, the form must be substitued with a flash notice that message was sent. So, here's the code:

app/controllers/contact.js:

import Ember from 'ember';

export default Ember.Route.extend({
    emailAddress: '',
    message: '',

    isValidEmail: Ember.computed.match('emailAddress', /^.+@.+\..+$/),
    isValidMessage: Ember.computed.gte('message.length', 5),

    isValid: Ember.computed.and('isValidEmail', 'isValidMessage'),
    isInvalid: Ember.computed.not('isValid'),

    actions: {
        sendMessage() {
            alert(`Sending message from: ${this.get('emailAddress')}`);
            this.set('responseMessage', `Thank you! We've received message from: ${this.get('emailAddress')} . You will be responsed ASAP!`);
            this.set('emailAddress', '');
        }
    }
});

and the template contact.hbs:

<h1>Contact us</h1>
<div class="well well-sm">
    <p> If you have any questions, feel free to contact us!</p>
</div>
<div class="row">
    <div class="col-md-6">
    
        <br/>
        <div class="alert alert-success"></div>
    
        <div class="form-group">
            
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group">
            
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    
    <button class="btn btn-primary btn-lg btn-block" disabled= >Contact us!</button>
</div>

but, still:

  1. The button remains active while the form is empty.
  2. There's no glyphicons appearing while completing the form.
  3. No notice appears when the message is sent.

What am I doing wrong?




Aucun commentaire:

Enregistrer un commentaire