React validatorjs strategy

Strategy for using validatorjs with react-validation-mixin.

The strategy interface for react-validation-mixin is defined here and that is what this library implements as an interface for validatorjs.

Installation

Browser

First follow the instructions to install validatorjs (tested with version 3.9) and then download dist/strategy.min.js and include via a script tag:

1<script src="dist/strategy.min.js" type="text/javascript"></script>

Or you can install with bower:

bower install react-validatorjs-strategy

Node

Requires at least Node 4.0.0.

On the command line type:

npm install react-validatorjs-strategy

Then in your JavaScript file:

1var strategy = require('react-validatorjs-strategy')

This also works if you're using webpack or browserify to compile your React components.

Usage

A working example containing the below can be found at https://github.com/TheChech/react-tutorial.

In React components

react-validation-mixin requires a component to be validated to have this.validatorTypes defined. To create this, call strategy.createSchema either in the constructor if you're using classes, or in a function which is run very early, such as getInitialState. This method takes one required parameter and two optional ones:

1this.validatorTypes = strategy.createSchema(
2    // First parameter is a list of rules for each element name
3    {
4        name: 'required',
5        email: 'required|email',
6        age: 'min:18'
7    },
8    // Second parameter is optional and is a list of custom error messages for elements
9    {
10        "required.email": "Without an :attribute we can't reach you!"
11    }
12    // Third parameter is also optional; a callback that takes the validator instance created
13    // and can be used to call methods on it. This is run at the point of validation.
14    function (validator) {
15        validator.lang = 'ru';
16    }
17);

To call the validation on for example a form submission:

1handleSubmit = function (e) {
2    e.preventDefault();
3
4    this.props.validate(function (error) {
5        if (!error) {
6            // Submit the data
7        }
8    });
9},

The use of this strategy makes no difference to how the validation is handled in the render method, but just for the sake of completeness, triggering the validation on blur and then rendering any validation messages under the element:

1<input
2    name='name'
3    type='text'
4    placeholder='Your name'
5    onBlur={this.props.handleValidation('name')}
6/>
7
8{this.props.getValidationMessages('name')}

Then after the component is defined:

1Component = validation(strategy)(Component);

Validating onChange

I prefer to validate on the change event of an input to get immediate feedback. However, this has a problem. If for example, you're validating for an email address, as soon as the user enters one character the field will be flagged up as invalid, even though they've not yet had a chance to enter valid data. What ideally should happen is that the field is not validated for the first time until it is blurred out and from then on, any change should be validated immediately.

To achieve this, there is another way of creating validation schemas; createInactiveSchema. This is called in exactly the same way, but all rules are turned off by default until activateRule is enabled, which should be called with onBlur.

An example:

1this.validatorTypes = strategy.createInactiveSchema(...);

Then the events bound to the element have to be changed slightly:

1<input
2    type="text"
3    placeholder="Your name"
4    name="name"
5    value={this.state.name}
6    onBlur={this.activateValidation}
7    onChange={this.handleChange}
8/>

These methods have to be created in the component:

1/**
2 * Activate the validation rule for the element on blur
3 *
4 * @param {Event} e
5 */
6activateValidation(e) {
7    strategy.activateRule(this.validatorTypes, e.target.name);
8    this.props.handleValidation(e.target.name)(e);
9},
10/**
11 * Set the state of the changed variable and then when set, call validator
12 *
13 * @param {Event} e
14 */
15handleChange(e) {
16    var state = {};
17    state[e.target.name] = e.target.value;
18
19    this.setState(state, () => {
20        this.props.handleValidation(e.target.name)(e);
21    });
22},

Submitting the whole form (when this.props.validate is called) works the same way; it automatically activates all rules.

Registering Custom Validation Rules

The Validator, accessible through the 3rd parameter of strategy.createSchema, enables registering custom validations.

1this.validatorTypes = strategy.createInactiveSchema({
2  username: 'required|usernameAvailable',
3}, {
4
5  }, function(validator) {
6  validator.constructor.registerAsync('usernameAvailable', function(username, attribute, req, passes) {
7    // do your database/api checks here etc
8    // then call the `passes` method where appropriate:
9    passes(); // if username is available
10    passes(false, 'Username has already been taken.');
11  });
12}

On the server (e.g. in Express)

The validation can also be used isomorphically both in the browser in React components and on the server. This is done by creating the schema in the same way and then calling validateServer which returns a promise; the rejection of which can be handled by an error handler. Because the rejection returns an instance of strategy.Error it can be easily identified.

As an example in Express:

1app.post('/contact', function (req, res, next) {
2    var schema = strategy.createSchema(...);
3
4    strategy.validateServer(req.body, schema).then(function () {
5        // Submit the data
6    })
7    .catch(next);
8}
9
10/**
11 * If a validation error, output a 400 JSON response containing the error messages.
12 * Otherwise, use the default error handler.
13 */
14app.use(function (err, req, res, next) {
15    if (err instanceof strategy.Error) {
16        res.status(400).json(err.errors);
17    } else {
18        next(err, req, res);
19    }
20});

Using this method also activates all rules if createInactiveSchema was used.

Testing

Simply clone the repository, run npm install and then run npm test. The tests are in tests/strategySpec.js.