Skip to content

Validation.profile() method

Creates a validation profile object which contains a validatable form and a grouping Validation object with validations bound to the form’s fields.

Syntax

Validation.profile(selector, fieldNames, validations);

Parameters

  • selector
    A CSS selector string that matches a form.

  • fieldNames
    An array of the form’s field names.

  • validations
    An array of Validation objects to bind to the form fields.

Return value

A validation profile object.

Exceptions

  • On the client side: if nothing matches to the specified selector, throws the corresponding error. In case the selector is invalid see the querySelector() method’s documentation.

  • On both sides: If not a Validation was passed in the validations array, throws the corresponding error.

Description

On the client side: tries to access a form element via the querySelector() method.

On the server side: creates an object with the specified field names which serves as a form with fields for the validations to be bound to and to provide a way of writing “isomorphic” code. Any attempt to access a non existing property or method on this object or its fields will be ignored and no error thrown.

This method clones passed in the validations array Validation objects, binds them to the form field elements specified in the passed in fieldNames array, and groups them into one Validation object. The grouped validations are accessible on this resulting Validation object by the respective name passed in fieldNames array. The resulting grouping Validation object is intended to be used as a middleware function on the server side and as an event handler function on the client side (the same is applicable to its grouped validations) and its validity state represents validity of data in all fields on the form.

This method was introduced for convinience to hide all the described boilerplate code.

Examples

In this example login and password fields are shared by both sign-in and sign-up forms. The sign-up form additionally has a password confirmation field.

First, Validation objects corresponding to these three fields are created and constraints shared between both forms are added to them (once in one place without being duplicated for both forms).

Then two validation profiles corresponding to the forms are created and sign-up form-specific constraints are added to the cloned login, password, and password confirmation validations that are accessed by the respective field name.

After having set up client side validations, you can just export signinV and signupV and use them on the server side as middleware functions:

import express from 'express';
import bodyParser from 'body-parser';
import { signinV, signupV } from 'your-validations-file-name.js';
import { signinRequestHandler, signupRequestHandler } from 'your-file-name.js';
const app = express();
const urlencodeParser = bodyParser.urlencoded({extended: false});
// validations are added as middleware functions
app.post('/signin', urlencodeParser, signinV, signinRequestHandler);
app.post('/signup', urlencodeParser, signupV, signupRequestHandler);

The UI side effects functions added as state callbacks are isolated here with the Validation().client and Predicate().client properties and will be ignored on the server side. Invocations of the form.addEventListener() and input.addEventListener() methods will be ignored on the server side as well.