Starticket React Validation

Validating data is a very common task in every frontend application. Starticket React Validation package can validate any type of data that come from form's input fields, URL, etc. Every data can be validated against multiple constraints easily without code repeating.

For every constraint there is defined default message for failed validation and easily each one can be customized in order to better fit the needs.

All constraints are grouped based on the type of data they validate:

1. Basic
2. Email
3. Number
4. String

NPM package is early BETA version and used for internal Starticket projects.

Installation

npm install starticket-react-validation

Example usage

As mentioned above, all constraints are divided into 4 groups based on type of data they validate. Below are given usage example for every constraints for each group.

Required steps before using any constraint:

• import desired constraint

import { ConstraintName } from './';

• instantiate Validator service class

let validatorService = new ValidatorService();

In order to show custom message, pass it when instantiating a constraint or omit it in order for default message to be shown.

Basic

Contains

This constraint checks if desired value is contained in given array. If no, error message is shown. Default error message is Value does not contain.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Contains } from './';
let validatorService = new ValidatorService();
let valueArray = ["hello", "world", "test"];
let correctString = "test";
let wrongString = "react";
let customErrorMessage = "This value is not contained in given string";

let errors = validatorService.validate(wrongString, [
    new Contains(valueArray, customErrorMessage)
]);

console.log(errors);

EqualTo

This constraint checks if desired value is identically equal to passed value. If no, error message is shown. Default error message is The values are not equal.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, EqualTo } from './';
let validatorService = new ValidatorService();
let value = "3";
let correctValue = "3";
let wrongValue = "4";
let customErrorMessage = "These value are not the same.";

let errors = validatorService.validate(value, [
    new EqualTo(wrongValue, customErrorMessage)
]);

console.log(errors);

isBlank

This constraint checks if desired value is blank or not. If no, error message is shown. Default error message is The values are not equal.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, IsBlank } from './';
let validatorService = new ValidatorService();
let correctValue = "";
let wrongValue = "4";
let customErrorMessage = "This value is not blank :)";

let errors = validatorService.validate(wrongValue, [
    new IsBlank(customErrorMessage)
]);

console.log(errors);

isFalse

This constraint checks if desired value is false or not. If no, error message is shown. Default error message is This value should be boolean - False.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, IsFalse } from './';
let validatorService = new ValidatorService();
let correctValue = false;
let wrongValue = true;
let customErrorMessage = "This value is not false.";

let errors = validatorService.validate(wrongValue, [
    new IsFalse(customErrorMessage)
]);

console.log(errors);

isNull

This constraint checks if desired value is null or not. If no, error message is shown. Default error message is There should be no value.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, IsNull } from './';
let validatorService = new ValidatorService();
let correctValue = null;
let wrongValue = 'test';
let customErrorMessage = "This value is not null.";

let errors = validatorService.validate(wrongValue, [
    new IsNull(customErrorMessage)
]);

console.log(errors);

isNumber

This constraint checks if desired value is number or not. If no, error message is shown. Default error message is Value is not a number.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, IsNumber } from './';
let validatorService = new ValidatorService();
let correctValue = 3;
let wrongValue = 'test';
let customErrorMessage = "This value is not a number.";

let errors = validatorService.validate(wrongValue, [
    new IsNumber(customErrorMessage)
]);

console.log(errors);

isTrue

This constraint checks if desired value is number or not. If no, error message is shown. Default error message is This value should be boolean - TRUE.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, IsTrue } from './';
let validatorService = new ValidatorService();
let correctValue = true;
let wrongValue = false;
let customErrorMessage = "This value is not true.";

let errors = validatorService.validate(wrongValue, [
    new IsTrue(customErrorMessage)
]);

console.log(errors);

length

This constraint checks if value has desired length. If no, error message is shown. Default error message is Length must be a characters.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Length } from './';
let validatorService = new ValidatorService();
let length = 5;
let correctValue = "react";
let wrongValue = 'test';
let customErrorMessage = "String's length should be " + length;

let errors = validatorService.validate(wrongValue, [
    new Length(length, customErrorMessage)
]);

console.log(errors);

maxLength

This constraint checks if string is shorter that desired length. If no, error message is shown. Default error message is Maximum length must be a characters.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, MaxLength } from './';
let validatorService = new ValidatorService();
let length = 6;
let correctValue = "react";
let wrongValue = "application";
let customErrorMessage = "Maximum string's length should be " + length;

let errors = validatorService.validate(wrongValue, [
    new MaxLength(length, customErrorMessage)
]);

console.log(errors);

minLength

This constraint checks if string is shorter that desired length. If no, error message is shown. Default error message is Minimum length must be a characters.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, MinLength } from './';
let validatorService = new ValidatorService();
let length = 6;
let correctValue = "application";
let wrongValue = "react";
let customErrorMessage = "Minimum string's length should be " + length;

let errors = validatorService.validate(wrongValue, [
    new MinLength(length, customErrorMessage)
]);

console.log(errors);

notBlank

This constraint checks if value's length is greater than zero. If no, error message is shown. Default error message is Value can not be empty.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, NotBlank } from './';
let validatorService = new ValidatorService();
let correctValue = "react";
let wrongValue = '';
let customErrorMessage = "Value shouldn't be empty";

let errors = validatorService.validate(wrongValue, [
    new NotBlank(customErrorMessage)
]);

console.log(errors);

notEqualTo

This constraint checks if value is not equal to passed value. If no, error message is shown. Default error message is The values are equal.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, NotEqualTo } from './';
let validatorService = new ValidatorService();
let value = "react";
let correctValue = "application";
let wrongValue = "react";
let customErrorMessage = "These values are equal.";

let errors = validatorService.validate(correctValue, [
    new NotEqualTo(value, customErrorMessage)
]);

console.log(errors);

notNull

This constraint checks if value is not null. If no, error message is shown. Default error message is Value need to have value.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, NotNull } from './';
let validatorService = new ValidatorService();
let correctValue = "react";
let wrongValue = null;
let customErrorMessage = "Value shouldn't be null.";

let errors = validatorService.validate(wrongValue, [
    new NotNull(customErrorMessage)
]);

console.log(errors);

type

This constraint checks if type of passed value is one of the following:

• string
• number
• boolean
• array
• object

Type name has to be string.

If no, error message is shown. Default error message is This value must be a type of .

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Type } from './';
let validatorService = new ValidatorService();
let type = "array";
let correctValue = ["react", "application"];
let wrongValue = true;
let customErrorMessage = "Value needs to be " + type;

let errors = validatorService.validate(wrongValue, [
    new Type(type, customErrorMessage)
]);

console.log(errors);

Email

email

This constraint checks if value is an email.

If no, error message is shown. Default error message is The Email is not valid..

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Email } from './';
let validatorService = new ValidatorService();
let correctValue = "[email protected]";
let wrongValue = "not-email.com";
let customErrorMessage = "Value is not an email";

let errors = validatorService.validate(wrongValue, [
    new Email(customErrorMessage)
]);

console.log(errors);

Number

greaterThan

This constraint checks if passed number is greater than desired value.

If no, error message is shown. Default error message is Value must be greater than .

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, GreaterThan } from './';
let validatorService = new ValidatorService();
let value = 5;
let correctValue = 7;
let wrongValue = 3;
let customErrorMessage = "Value is not greater than " + value;

let errors = validatorService.validate(wrongValue, [
    new GreaterThan(value, customErrorMessage)
]);

console.log(errors);

greaterThanOrEqual

This constraint checks if passed number is greater than or equal to desired value.

If no, error message is shown. Default error message is Value must be greater or equal than .

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, GreaterThan } from './';
let validatorService = new ValidatorService();
let value = 5;
let correctValue = 5;
let wrongValue = 3;
let customErrorMessage = "Value is not greater than or equal to " + value;

let errors = validatorService.validate(wrongValue, [
    new GreaterThanOrEqual(value, customErrorMessage)
]);

console.log(errors);

isNumber

This constraint checks if passed value is number. String containing only number are considered numbers too.

If no, error message is shown. Default error message is Value is not a number..

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, IsNumber } from './';
let validatorService = new ValidatorService();
let correctValue = 5;
let wrongValue = "react";
let customErrorMessage = "This value is not number.";

let errors = validatorService.validate(wrongValue, [
    new IsNumber(customErrorMessage)
]);

console.log(errors);

lessThan

This constraint checks if passed number is lower than desired value.

If no, error message is shown. Default error message is Value must be less than .

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, LessThan } from './';
let validatorService = new ValidatorService();
let value = 5;
let correctValue = 3;
let wrongValue = 7;
let customErrorMessage = "Value is not less than " + value;

let errors = validatorService.validate(wrongValue, [
    new LessThan(value, customErrorMessage)
]);

console.log(errors);

lessThanOrEqual

This constraint checks if passed number is lower than or equal to desired value.

If no, error message is shown. Default error message is Value must be lower or equal than .

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, LessThanOrEqual } from './';
let validatorService = new ValidatorService();
let value = 5;
let correctValue = 5;
let wrongValue = 7;
let customErrorMessage = "Value is not lower than or equal to " + value;

let errors = validatorService.validate(wrongValue, [
    new LessThanOrEqual(value, customErrorMessage)
]);

console.log(errors);

negative

This constraint checks if value is a negative number.

If no, error message is shown. Default error message is The value is not negative.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Negative } from './';
let validatorService = new ValidatorService();
let correctValue = -5;
let wrongValue = 5;
let customErrorMessage = "Value is not negative";

let errors = validatorService.validate(wrongValue, [
    new Negative(customErrorMessage)
]);

console.log(errors);

positive

This constraint checks if value is a positive number.

If no, error message is shown. Default error message is This value must be positive number.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Positive } from './';
let validatorService = new ValidatorService();
let correctValue = 5;
let wrongValue = -5;
let customErrorMessage = "Value is not positive";

let errors = validatorService.validate(wrongValue, [
    new Positive(customErrorMessage)
]);

console.log(errors);

range

This constraint checks if value is a positive number.

If no, error message is shown. Default error message is Number is not in allowed range.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Range } from './';
let validatorService = new ValidatorService();
let fromValue = 5;
let toValue = 10;
let correctValue = 7;
let wrongValue = 12;
let customErrorMessage = "Value is not in range.";

let errors = validatorService.validate(wrongValue, [
    new Range(fromValue, toValue, customErrorMessage)
]);

console.log(errors);

String

date

This constraint checks if value is a date.

If no, error message is shown. Default error message is This is not valid date.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Range } from './';
let validatorService = new ValidatorService();
let fromValue = 5;
let toValue = 10;
let correctValue = 7;
let wrongValue = 12;
let customErrorMessage = "Value is not in range.";

let errors = validatorService.validate(wrongValue, [
    new Range(fromValue, toValue, customErrorMessage)
]);

console.log(errors);

dateTime

This constraint checks if value is a datetime.

If no, error message is shown. Default error message is This is not valid datetime.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, DateTime } from './';
let validatorService = new ValidatorService();
let correctValue = '12.12.1992 12:12';
let wrongValue = 12;
let customErrorMessage = "Invalid DateTime string.";

let errors = validatorService.validate(wrongValue, [
    new DateTime(customErrorMessage)
]);

console.log(errors);

time

This constraint checks if value is a time.

If no, error message is shown. Default error message is This is not valid time.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Time } from './';
let validatorService = new ValidatorService();
let correctValue = '12:12:12';
let wrongValue = 12;
let customErrorMessage = "Invalid Time string.";

let errors = validatorService.validate(wrongValue, [
    new Time(customErrorMessage)
]);

console.log(errors);

date

This constraint checks if value is a time.

If no, error message is shown. Default error message is This is not valid date.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Date } from './';
let validatorService = new ValidatorService();
let correctValue = '12-12-1992';
let wrongValue = 12;
let customErrorMessage = "Invalid Date string.";

let errors = validatorService.validate(wrongValue, [
    new Date(customErrorMessage)
]);

console.log(errors);

ipAddress

This constraint checks if value is a valid ip address.

If no, error message is shown. Default error message is The IP address is not valid.

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, IpAddress } from './';
let validatorService = new ValidatorService();
let correctValue = "127.0.0.1";
let wrongValue = "256.255.255.255";
let customErrorMessage = "Value is not a valid ip address.";

let errors = validatorService.validate(wrongValue, [
    new IpAddress(customErrorMessage)
]);

console.log(errors);

URL

This constraint checks if value is a valid URL.

If no, error message is shown. Default error message is The URL is not valid..

Example with custom error message is given below: In order to show custom one, omit the error message string.

import { ValidatorService, Url } from './';
let validatorService = new ValidatorService();
let correctUrl = "http://www.starticket.ch/";
let wrongUrl   = "";
let customErrorMessage = "The Url you entered is wrong. Please try again.";

let errors = validatorService.validate(wrongUrl, [
    new Url(customErrorMessage)
]);

console.log(errors);

Example with multiple constraints

In following example two constraints Url and NotBlank are used for validating URL. For every failed validation message is shown.

import { ValidatorService, Url, NotBlank } from './';

let validatorService = new ValidatorService();

let correctUrl = "http://www.starticket.ch/";
let wrongUrl   = "";

let urlErrors = validatorService.validate(wrongUrl, [
    new Url("The Url you entered is wrong. Please try again."),
    new NotBlank("Url is mandatory.")
]);

if (urlErrors.length > 0) {

    urlErrors.forEach(function(error){
        console.log(error);
    });

} else {
    console.log('Url is correct :-)');
}

Versioning

For versioning SemVer is used.

Authors

• Ana Simonović - Developer - [email protected]
• Stevan Tošić - Developer - [email protected]
• Nikola Radović - Developer - [email protected]
• Milivoje Vujadinović - Team Lead - [email protected]

Built With

• React JS - The JavaScript Library Used
• ES6 - The ES6 Used