Model Validations

One of the core features of Ember FW, which it helps to make easier when developing the apps is validations. Validations are specifically designed to let a user know when they are entering data to be saved that their data is invalid in some way (missing a required field, or note went over the maximum length, etc). Giving the users any general notices not specifically related to data entry should use Notifications. While our validations are not something that we completely defined ourselves, it is used so frequently, it should be mentioned here. Our validations extend ember-cp-validations, whose documentation can be found here. But there are a also few classes that ember-fw adds for you to use ember-cp-validations. Setting up for FW Validations proceeds in two parts: the Model Validation itself, and using the validated components.

Model Validation Itself

In order for a model to be validated before it is saved, there are steps that need to be taken to prepare the model to be validated. There are two mixins that need to be used in the model file. The idea with this is to let the model file know which attributes need validation and how. The following Mixins need to be used:

Use Mixins

The first mixin you need is the your custom validation mixin. This is the validation which details the specific information for this model in this app. This validation file needs to be located at the app/mixins/validations, and should follow the stipulations given by ember-cp-validation: basic and advanced documentation. A sample validation file might look like this:

import {
   validator, buildValidations
} from 'ember-cp-validations';

export default buildValidations({
    // model will not validate unless name is present and is less than 64 characters
    name: [
        validator('presence', {
            presence: true,
            message: 'Name must be defined'
        }),
        validator('length', {
            allowBlank: false,
            max: 64,
            message: 'Name must be 64 characters or less.'
        })
    ],
    // model will not validate unless the custom fields validator returns true
    fields: validator('fields')
});

A full list of helpful validators can be found in the ember-cp-validation documentation, but most often used validators in our apps would be presence and length. When using any validator that is predefined, it is vital to keep in mind the common options, which are used for all predefined validators.

If none of those predefined validators work, there is always an option to define your own validators in the app/validators folder, following this documentation. In the example above, "fields" is a custom validator used in this validation for the model.

The second mixin you need is the Ember-FW Validation Mixin. Relevant details for this can be found at that link. It should be imported into the model with the following import syntax:

import ValidationMixin from '@bennerinformatics/ember-fw/mixins/validation';

There is nothing you need to do with this mixin, other than just importing it properly to the model as is said below.

Import to Model

The final step is extending the model needing the validation to save is actually importing it in the model itself. That can be done using the following syntax:

import Model from 'ember-data/model';
import ValidationMixin from '@bennerinformatics/ember-fw/mixins/validation';
// in the following import app code should be replaced with app short code
import CustomValidation from '[appCode]/mixins/validations/custom-validation-file-name';

export default Model.extend(CustomValidation, ValidationMixin, {
    // ... model content here
});

Note: It is very important that the order be kept: CustomValidation for that model should be before ValidationMixin, otherwise, there will be errors and validation will not work.

Validated Components

Whenever a model is actually being saved, whatever validated attributes of the model are being saved, you need to make sure to use a validated component, otherwise the message will not be displayed. Incidentally, if you have a red X that does not display any error either in the Network or on the Console, but for some reason it is not letting you save, this is probably due to a failure to use validated input components everywhere you need to. You need to make sure that every attribute on the model that is validated for any reason in your validations uses the proper one of these. Each of these components use the validated-input mixin, and so inherit most of their key attributes. This mixin is completely internal to ember-fw, and should really not be used outside of it, but it is helpful to know what key attributes are available across all three inputs. There are three validated components to choose from:

• FwValidatedTextfield is for simple string data which needs to be validated. Use this component in places you would ordinarily use fw-input.
• FwValidatedTextarea is for longer notes which need to be validated. Use this component in places you would ordinarily use fw-textarea.
• FwValidatedInputContainer is for any other input type needing to be validated. This is the catch all for whatever other input method you might be using. These are often with power-select, bs-datetimepicker, or more.

The API Docs for each of those components goes into detail for how to implement those components specifically, so we don't need to elaborate any further here.