ember-semantic-validated-form
Simple validated form component for Semantic UI.
Uses ember-cp-validations for form validation.
Installation
ember install ember-semantic-validated-form
Example usage
The following code outlines an exemplary signup-form
component:
// components/signup-form.js;; // ember-cp-validations model. For examples and instructions, // visit http://offirgolan.github.io/ember-cp-validations/const Validations = ; const SignupModel = EmberObject; Component;
{{!templates/components/signup-form.hbs}}<h1 class="ui top attached header">Create Account</h1>{{#semantic-validated-form class="ui bottom attached form segment" model=signupModel onSuccess=(action "signup")as |form|}} {{#form.control class="required" property="username" label="Username" as |control|}} {{input value=control.value placeholder="Enter Username" maxlength=20 focus-out=control.focus-out }} {{/form.control}} {{#form.control class="required" property="email" label="E-mail" as |control|}} {{input value=control.value placeholder="Enter E-Mail address" focus-out=control.focus-out }} {{/form.control}} {{#form.control class="required" property="password" label="Password" as |control|}} {{input value=control.value placeholder="Enter Password" focus-out=control.focus-out type="password" }} {{/form.control}} {{#form.control class="required" property="passwordConfirmation" label="Confirm Password" as |control|}} {{input value=control.value placeholder="Repeat Password" focus-out=control.focus-out type="password" }} {{/form.control}} {{#form.button class="fluid"}} Sign up {{/form.button}}{{/semantic-validated-form}}
Notes
The onSuccess
action is invoked when the form.button
is pressed while the model is valid.
An optional onFailure
action is invoked if the model is invalid.
The control.focus-out
action should be bound to the control's input
component, if applicable, to mark the field red
if it's left with invalid content.