Required HTML5 attribute does not work in Ember.js

Question

I am creating a login form for the Ember.js application and would like to use the "required" attribute on the inputs to simplify client-side validation. However, this check does not seem to work when I add an Ember action to the submit button.

For instance:

<form class="form" role="form">
   <div class="form-group">
      <label class="sr-only" for="exampleInputEmail2">Email address</label>
      <input type="email" class="form-control" id="email" placeholder="Email address" required>
   </div>
   <div class="form-group">
      <label class="sr-only" for="exampleInputPassword2">Password</label>
      <input type="password" class="form-control" id="password" placeholder="Password" required>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> Remember me
      </label>
   </div>
   <div class="form-group">
      <button {{action 'login'}} class="btn btn-success btn-block">Sign in</button>
   </div>
</form>

{{action 'login'}}Validation is performed at the time of deletion , otherwise it is not.

How can I get around this problem? Thank.

Answer 1

Adding an action to the button bypasses the procedure for submitting the form, you want to add it to the submit form, and it will be deleted only after the form tries to submit.

<form class="form-horizontal" {{action "login" on="submit"}}>
  ...
</form>

http://emberjs.jsbin.com/tomolevi/1/edit