ember-cp-validations - how to display error messages when there's no loss of focus before submit?

331 Views Asked by At

Using ember-cp-validations typically involves validating each property as the corresponding form element loses focus. If validation fails an error message is displayed.

  <div class="form-group">
    <label class="control-label">Name</label>
    <div class="">
      {{  input type="text"
          value=item.name
          class="form-control"
          placeholder="The name of the Guest"
          focus-out=(action (mut nameError) true)
      }}
    </div>
    {{#if nameError}}
      <div class="text-danger">
        {{v-get item 'name' 'message'}}
      </div>
    {{/if}}
  </div>

This is the approach demonstrated in the online-demo (https://embermap.com/video/ember-cp-validations) however if the user enters the form and immediately hits a button that submits the form then the messages are never displayed (because focus-out never fires).

The approach demonstrated uses the object returned from validate() which is fine but in that case I would like a way to fire the validation on all form elements in order that the error messages are displayed (something to put where "Invoke all validations ..." is shown below).

export default Component.extend({
  actions:{
    buttonClicked(theguest) {
      theguest.validate()
        .then(({ validations }) => {
          if(validations.get('isValid'))
          {
            this.sendAction('action', theguest);
          }
          else
          {
            //Invoke all validations in order that
            //any which fail validation will show
            //their error message
          }
        })
    }
  }
});

What's a neat way to do this ? Thank you.

0

There are 0 best solutions below