Simple client side form validation
npm install skymmanpm install --save skymma.* field [ String ] = name of the field being validated
* name [ String ] = name of the validator
* valid [ Boolean ] = true if valid, false otherwise
* message [ String ] = an optionally specified message when manually setting the validity of a validator
To convert the validation list to an error object, just call the method asObject on the list.
``javascript`
const user = {
username: '',
email: '',
rules: function(check) {
check('username').required();
check('email').email();
}
};
Then import skymma and validate the object
`javascript`
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
`javascript`
const rules = function(check) {
check('username').required();
check('email').email();
};
const user = {
username: '',
email: ''
};
const errors = validate(user, rules).asObject();
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.`javascript
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
`javascript
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);
`Included validators
By default the different validators available are$3
Check that a field is set to any value.$3
Check that the field is an email.$3
Check for a minimum length of a field.$3
Check for a maximum length of a field.$3
Check for a minimum value of a numeric field.$3
Check for a maximum value of a numeric field.Custom validators
A new validator is easily added`javascript
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);
`Manually set validity on fields
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.`javascript
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`.