HTML5的required属性在Ember.js中无法正常工作

Question

我正在为我的Ember.js应用程序创建登录表单，并希望利用输入框上的“required”属性进行简单的客户端验证。但是，当我在提交按钮上添加Ember动作时，似乎这种验证不起作用。

例如：

<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'}}时，验证起作用，否则不起作用。 如何解决这个问题？谢谢。

- user1594328

Answer 1

将操作添加到按钮将绕过表单提交流程，您需要将其添加到表单提交中，它只会在表单尝试提交时被触发。

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

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

- Kingpin2k