CODEWITHSUNDEEP
javascripthtmlember.js
user1594328
user1594328

Reputation: 567

HTML5 required attribute not working in Ember.js

I am creating a login form for my Ember.js application, and would like to take advantage of the 'required' attribute on inputs for easy client-side validation. However, it seems that this validation does not work when I add an Ember action to the submit button.

For example:

<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>

The moment I remove {{action 'login'}} the validation works, otherwise it does not.

How can I get around this issue? Thanks.

Upvotes: 4

Views: 1111

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Adding the action to the button will circumvent the form submit procedure, you'll want to add it to the form submit, and it will only be hit once the form attempts to submit.

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

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

Upvotes: 6

Related Questions