Simple client side object validation in javascript.
Install skymma by running npm install --save skymma
.
By default skymma will create a list of validation errors. The list contains objects with the fields:
field [ String ]
= name of the field being validatedname [ String ]
= name of the validatorvalid [ Boolean ]
=true
if valid,false
otherwisemessage [ String ]
= an optionally specified message when manually setting the validity of a validator
Displaying errors when validating forms is conveniently handled in angular by specifying all error messages directly in the view. Skymma can create an error object similar to what you have in angular, but will make it possible to use with other single page app view libraries like react, ractive, vue, rivets etc. Just include the error object in the view and show different messages depending on which validation that failed.
To convert the validation list to an error object, just call the method asObject
on the list.
First we specify a rules method on the form object
const user = {
username: '',
email: '',
rules: function(check) {
check('username').required();
check('email').email();
}
};
Then import skymma and validate the object
import validate from 'skymma';
// as a list of errors
const errors = validate(user);
// or as an object
const errorsObj = errors.asObject();
the errorsObj
object is then included in the view to manage errors shown in the client.
At times it might be appropriate to specify the rules function outside of the model object. In those cases it is possible to supply the function at validation
const rules = function(check) {
check('username').required();
check('email').email();
};
const user = {
username: '',
email: ''
};
const errors = validate(user, rules).asObject();
The errors
object contains $valid
and $invalid
properties that says if the object has any errors or not.
For every field validated, a property with that name is added to errors
, with an object where properties corresponds to the validators and with a value of true
if the validation failed and false
otherwise. The object also contains the properties $valid
and $invalid
, which is specific for that field.
expect(errors.$valid).toBe(false);
expect(errors.$invalid).toBe(true);
expect(errors.username.required).toBe(true);
expect(errors.username.$valid).toBe(false);
expect(errors.email.email).toBe(false);
expect(errors.email.$valid).toBe(true);
Changing the user input and validating again we get
user.username = 'Muppen';
user.email = 'muppen@svimma.se';
const errors = validate(user);
expect(errors.$valid).toBe(true);
expect(errors.$invalid).toBe(false);
expect(errors.username.required).toBe(false);
expect(errors.email.email).toBe(false);
By default the different validators available are
Check that a field is set to any value.
Check that the field is an email.
Check for a minimum length of a field.
Check for a maximum length of a field.
Check for a minimum value of a numeric field.
Check for a maximum value of a numeric field.
A new validator is easily added
import {addValidator} from 'skymma';
const user = {
username: '',
rules: function(check) {
check('username').mustBeBulle('a bulle');
}
};
addValidator('mustBeBulle', function(bulle) {
return this.value == bulle;
});
let errors = validate(user).asObject();
expect(errors.username.mustBeBulle).toBe(true);
user.username = 'a bulle';
errors = validate(user).asObject();
expect(errors.username.mustBeBulle).toBe(false);
In the rules
method, manual validation can be performed. For instance to check that a "confirm password" field has the same value as the password.
const obj = {
password: '',
passwordConfirm: '',
rules: function(check) {
check('passwordConfirm').setValid('confirm', this.passwordConfirm == this.password);
}
};
obj.password = "jubel och bullar";
let errors = validate(obj).asObject();
expect(errors.passwordConfirm.confirm).toBe(true);
obj.passwordConfirm = "jubel och bullar";
errors = validate(obj).asObject();
expect(errors.passwordConfirm.confirm).toBe(false);
The setValid
method takes two arguments, the name of the validator and whether the field is valid or not. It can also take an optional third argument with
a custom error message, retrievable from the object $messages
.