Ember-cli-validation-components

Easy to use input components to manage all your form validation needs

This ember-cli addon provides four validated input components input, input-mask, select and checkbox plus a service with several convenience functions to your app. These easy to use components make form validation easy and dare I say almost fun.

How Easy Is It?

This:

// controllers/index.js
form: Ember.A([
  {_id: "name", regex: /^[A-Za-z]+$/},
  {_id: "pin" , regex: /^\d{4}$/}
])

Plus this:

<!-- templates/index.hbs -->
{{#validated-input _id="name" formFields=form contentPosition="after" placeholder="Name"}}
  <div style="color:red">Only alpha chars</div>
{{/validated-input}}
 
{{#validated-input _id="pin" formFields=form contentPosition="after" placeholder="Pin Number"}}
  <div style="color:red">Pin is a four digit number</div>
{{/validated-input}}

Gives you this:

Sign Me Up Already! (Installation)

NOTE: This add requires Ember version 1.13.1 or higher.

ember install ember-cli-validation-components

Service Injection

Injecting the service can be accomplished with a single line.

formValidator: Ember.inject.service()

The Details

Component Examples

• Text Input
• Text Masked Input
• Select Box
• Check Box

Form Validation Functions

• isValid (Boolean are all form fields valid)
• markInvalid (Display errors for all invalid form fields)
• formData (Return an object containing all fields and values from the form)

Custom Field Validators (Other than regex)

• Custom validation