Ember CP Validations is a Ruby on Rails inspired model validation framework that is completely and utterly computed property based. Ember has a ton of great options when it comes to validations. So why did we choose this library?
Ruby on Rails inspired validators.
The use of computed properties instead of observers.
No need for controllers.
I am going to quickly go over a simple implementation of user creation/update validations as well as address the struggles and solutions found through the process of using this library.
NOTE: All code examples use the --pod structure. Actions are handled within routes.
Step 1: Installation
ember install ember-cp-validations
Step 2: Build Your Validations
Let’s begin with the basics! Ember CP Validations Basic Usage Docs explains how to implement validator rules within the model. In our case we add validations for email, firstName, and lastName within the user model. Building these rules will then generate a mixin that we will include in our model. Default messages are included for pre-existing validator classes such as ‘presence’, ‘length’ and ‘format’.
Advanced options are easily implemented for such validators if defaults aren’t your thing. Custom validators are also very useful and work well for validating unique records and circumstances. Step two complete.
Step 3: Showing Inline Errors
Ember g component validated-input
This will generate 2 files, component.js & template.hbs
Step 4: Utilizing The Component
Okay getting closer! To use our component we simply have to replace our previous input with validate-input in our new template and edit template forms. Like any component, our validate-input.js can be reused for input validations throughout our app. In unison with our component we also utilized the v-get helper which allows access to global model properties such as isValid:
At this point the component is working for our edit form. However, our user creation form is having no such luck. WHY!? If you examine what is being passed to our component in the above example, our issue lies with model=model. Our edit route includes a model hook to find the user in need of updating:
Our new route is calling createRecord within our action and never specifying a model. Our validations are within our user model and without a hook in our route, model=undefined. Without a reference to the user model our validations won’t be hit.
1. Add a createRecord model hook in the new/route.js.
This allows our route access to the model and validations within it! YAY! However it also creates a temporary user object until the index is refreshed. After create we transition to the users index. The solution to this issue is to reload the index from our users/route.js.
2. Put Validations into a separate file.
1. Create a validations folder.
2. Create a new validation file within your validations folder and include all validation code previously contained in the user model.
3. Import the new Validation Mixin to the user/new route.js
4. Create a model hook that returns this in your user/new route.js.
this refers to the new route, where our validation file has been imported and been mixed in.