Validation with yup

Our validation system is supporting any schema however we strongly recommend to check and use yup the documentation of yup library

There are two types of validations which we can trigger inside the form:

• Client side validation based on yup schema
• Backend validation based on submitted values and returned to the form

// any FieldStructure {
    // other props in field structure,
    validations?: unknown;
}

It is unknown since developers can use any validation library or just regular expressions.

Client side validation

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const labelExample = () => <p>text in paragraph</p> const validateField = (value, validation) => { if (!validation) return ''; const errors: string[] = []; try { validation.validateSync(value, { abortEarly: false, }); } catch (err: any) { err.inner.forEach((e: ValidationError) => { errors.push(e.message); }); } // in the example we need to escape the next line char return errors.join('\n'); } const schema: FormSchema = { textFieldExample: { type: 'text', elementProperties: { className: 'w-60' }, fieldWrapperProperties: { className: 'mb-2' }, fieldLabel: labelExample, placeholder: 'Placeholder value', validations: yup .string() .ensure() .required('required field') .min(4, 'Need 4 chars') .max(10, 'Max 10 chars'), ariaRequired: true, }, numberFieldExample: { fieldLabel: () => 'Label example', fieldWrapperProperties: { className: 'mb-4' }, type: 'number', validations: yup.number().min(1, 'min 1').max(10, 'max 10'), } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} validationCallback={validateField} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const labelExample = () => <p>text in paragraph</p>
const validateField = (value, validation) => {
    if (!validation) return '';
    const errors: string[] = [];
    try {
        validation.validateSync(value, {
            abortEarly: false,
        });
    } catch (err: any) {
        err.inner.forEach((e: ValidationError) => {
            errors.push(e.message);
        });
    }
    // in the example we need to escape the next line char
    return errors.join('\n');
}
const schema: FormSchema = {
    textFieldExample: {
        type: 'text',
        elementProperties: { className: 'w-60' },
        fieldWrapperProperties: { className: 'mb-2' },
        fieldLabel: labelExample,
        placeholder: 'Placeholder value',
        validations: yup
                        .string()
                        .ensure()
                        .required('required field')
                        .min(4, 'Need 4 chars')
                        .max(10, 'Max 10 chars'),
        ariaRequired: true,
    },
    numberFieldExample: {
        fieldLabel: () => 'Label example',
        fieldWrapperProperties: { className: 'mb-4' },
        type: 'number',
        validations: yup.number().min(1, 'min 1').max(10, 'max 10'),
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
        validationCallback={validateField}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result

Backend side validation

To trigger backend validation, we need to return the same structure of fields as our form is sending to the server in Submit action, with information what was wrong. We will mock the backend validation return inside onSubmit method.

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); return { textFieldExample: 'not enough chars', numberFieldExample: 'value does not match', } } const labelExample = () => <p>text in paragraph</p> const validateField = (value, validation) => { if (!validation) return ''; const errors: string[] = []; try { validation.validateSync(value, { abortEarly: false, }); } catch (err: any) { err.inner.forEach((e: ValidationError) => { errors.push(e.message); }); } // in the example we need to escape the next line char return errors.join('\n'); } const schema: FormSchema = { textFieldExample: { type: 'text', elementProperties: { className: 'w-60' }, fieldWrapperProperties: { className: 'mb-2' }, fieldLabel: labelExample, placeholder: 'Placeholder value', }, numberFieldExample: { fieldLabel: () => 'Label example', fieldWrapperProperties: { className: 'mb-4' }, type: 'number', } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} validationCallback={validateField} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    return {
        textFieldExample: 'not enough chars',
        numberFieldExample: 'value does not match',
    }
}
const labelExample = () => <p>text in paragraph</p>
const validateField = (value, validation) => {
    if (!validation) return '';
    const errors: string[] = [];
    try {
        validation.validateSync(value, {
            abortEarly: false,
        });
    } catch (err: any) {
        err.inner.forEach((e: ValidationError) => {
            errors.push(e.message);
        });
    }
    // in the example we need to escape the next line char
    return errors.join('\n');
}
const schema: FormSchema = {
    textFieldExample: {
        type: 'text',
        elementProperties: { className: 'w-60' },
        fieldWrapperProperties: { className: 'mb-2' },
        fieldLabel: labelExample,
        placeholder: 'Placeholder value',
    },
    numberFieldExample: {
        fieldLabel: () => 'Label example',
        fieldWrapperProperties: { className: 'mb-4' },
        type: 'number',
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
        validationCallback={validateField}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result

Initial validation on render

We can trigger validation of fields after the render and before user will touch any field with just one property called showErrorsOnInitialRender.

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const labelExample = () => <p>text in paragraph</p> const validateField = (value, validation) => { if (!validation) return ''; const errors: string[] = []; try { validation.validateSync(value, { abortEarly: false, }); } catch (err: any) { err.inner.forEach((e: ValidationError) => { errors.push(e.message); }); } // in the example we need to escape the next line char return errors.join('\n'); } const schema: FormSchema = { textFieldExample: { type: 'text', elementProperties: { className: 'w-60' }, fieldWrapperProperties: { className: 'mb-2' }, fieldLabel: labelExample, placeholder: 'Placeholder value', validations: yup .string() .ensure() .required('required field') .min(4, 'Need 4 chars') .max(10, 'Max 10 chars'), ariaRequired: true, }, numberFieldExample: { fieldLabel: () => 'Label example', fieldWrapperProperties: { className: 'mb-4' }, type: 'number', validations: yup.number().min(1, 'min 1').max(10, 'max 10'), } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} validationCallback={validateField} showErrorsOnInitialRender > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const labelExample = () => <p>text in paragraph</p>
const validateField = (value, validation) => {
    if (!validation) return '';
    const errors: string[] = [];
    try {
        validation.validateSync(value, {
            abortEarly: false,
        });
    } catch (err: any) {
        err.inner.forEach((e: ValidationError) => {
            errors.push(e.message);
        });
    }
    // in the example we need to escape the next line char
    return errors.join('\n');
}
const schema: FormSchema = {
    textFieldExample: {
        type: 'text',
        elementProperties: { className: 'w-60' },
        fieldWrapperProperties: { className: 'mb-2' },
        fieldLabel: labelExample,
        placeholder: 'Placeholder value',
        validations: yup
                        .string()
                        .ensure()
                        .required('required field')
                        .min(4, 'Need 4 chars')
                        .max(10, 'Max 10 chars'),
        ariaRequired: true,
    },
    numberFieldExample: {
        fieldLabel: () => 'Label example',
        fieldWrapperProperties: { className: 'mb-4' },
        type: 'number',
        validations: yup.number().min(1, 'min 1').max(10, 'max 10'),
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
        validationCallback={validateField}
        showErrorsOnInitialRender
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result

Validation based on value from different field

We have added support to validate field A based on the value of field B e.g. A and B are datepicker fields, and you want to check if date value in field B is not before date value of A.

To utilize this validation you need to apply in schema properties:

To field A

    associatedValidationBasedOnOtherFieldValues: {
        fieldName: string;
        useSamePath?: boolean;
        validation: unknown;
    }[]

This is applying additional validation schemas to the field

To field B

    arrayOfFieldsToRevalidateOnChange: {
        fieldName: string;
        useSamePath?: boolean;
    }[]

This will allow field B to trigger validations in field A to check if something changed

useSamePath property is allowing to only put the field name inside the fieldName property without replicating the whole path to that field. You can spot the difference inside the schema.

It is super useful inside nested sections or array fields, since you can easily point to the nearest sibling field.

To see error message focus first input and blur it, or add property showErrorsOnInitialRender to FormWrapper like in example above (Initial validation on render)

Live Editor

// You can play with code, with HTML tags and text as much as you want! async function onSubmit(values, form, callback) { await(300); alert(JSON.stringify(values)); } const labelExample = () => <p>text in paragraph</p> const validateField: FormContextInterface['validationCallback'] = ( value: any, validation: AnySchema, // manual cast to yup type allValues, associatedValidationBasedOnOtherFieldValues ): string => { if (!validation) return ''; const errors: string[] = []; try { validation.validateSync(value, { abortEarly: false, }); } catch (err: any) { err.inner.forEach((e: ValidationError) => { errors.push(e.message); }); } if (associatedValidationBasedOnOtherFieldValues.length) { associatedValidationBasedOnOtherFieldValues.forEach( (associatedValidation) => { try { const fieldValue = getIn( allValues, associatedValidation.fieldName ); (associatedValidation.validation as AnySchema).validateSync( fieldValue, { abortEarly: false, } ); } catch (err: any) { err.inner.forEach((e: ValidationError) => { errors.push(e.message); }); } } ); } return errors.join(', '); }; const schema: FormSchema = { sectionExample:{ type: 'section', fields: [ { textFieldExample: { type: 'text', elementProperties: { className: 'w-60' }, fieldWrapperProperties: { className: 'mb-2' }, fieldLabel: labelExample, placeholder: 'Placeholder value', validations: yup .string() .ensure() .required('required field') .min(4, 'Need 4 chars') .max(10, 'Max 10 chars'), associatedValidationBasedOnOtherFieldValues: [ { useSamePath: true, fieldName: 'numberFieldExample', validation: yup.string().required('Number should be present'), }, ], ariaRequired: true, } }, { numberFieldExample: { fieldLabel: () => 'Label example', fieldWrapperProperties: { className: 'mb-4' }, type: 'number', arrayOfFieldsToRevalidateOnChange: [ { fieldName: 'textFieldExample', useSamePath: true }, ], } } ] } } render ( <FormWrapper schema={schema} onSubmit={onSubmit} validationCallback={validateField} > <Button type='submit' scheme='primary'> Submit </Button> </FormWrapper> )

// You can play with code, with HTML tags and text as much as you want!
async function onSubmit(values, form, callback) {
    await(300);
    alert(JSON.stringify(values));
}
const labelExample = () => <p>text in paragraph</p>
const validateField: FormContextInterface['validationCallback'] = (
    value: any,
    validation: AnySchema, // manual cast to yup type
    allValues,
    associatedValidationBasedOnOtherFieldValues
): string => {
    if (!validation) return '';
    const errors: string[] = [];
    try {
        validation.validateSync(value, {
            abortEarly: false,
        });
    } catch (err: any) {
        err.inner.forEach((e: ValidationError) => {
            errors.push(e.message);
        });
    }
    if (associatedValidationBasedOnOtherFieldValues.length) {
        associatedValidationBasedOnOtherFieldValues.forEach(
            (associatedValidation) => {
                try {
                    const fieldValue = getIn(
                        allValues,
                        associatedValidation.fieldName
                    );
                    (associatedValidation.validation as AnySchema).validateSync(
                        fieldValue,
                        {
                            abortEarly: false,
                        }
                    );
                } catch (err: any) {
                    err.inner.forEach((e: ValidationError) => {
                        errors.push(e.message);
                    });
                }
            }
        );
    }
    return errors.join(', ');
};
const schema: FormSchema = {
    sectionExample:{
        type: 'section',
        fields: [
            {
                textFieldExample: {
                    type: 'text',
                    elementProperties: { className: 'w-60' },
                    fieldWrapperProperties: { className: 'mb-2' },
                    fieldLabel: labelExample,
                    placeholder: 'Placeholder value',
                    validations: yup
                                    .string()
                                    .ensure()
                                    .required('required field')
                                    .min(4, 'Need 4 chars')
                                    .max(10, 'Max 10 chars'),
                    associatedValidationBasedOnOtherFieldValues: [
                        {
                            useSamePath: true,
                            fieldName: 'numberFieldExample',
                            validation: yup.string().required('Number should be present'),
                        },
                    ],
                    ariaRequired: true,
                }
            },
            {
                numberFieldExample: {
                    fieldLabel: () => 'Label example',
                    fieldWrapperProperties: { className: 'mb-4' },
                    type: 'number',
                    arrayOfFieldsToRevalidateOnChange: [
                        { fieldName: 'textFieldExample', useSamePath: true },
                    ],
                }
            }
        ]
    }
}
render (
     <FormWrapper
        schema={schema}
        onSubmit={onSubmit}
        validationCallback={validateField}
    >
        <Button type='submit' scheme='primary'>
            Submit
        </Button>
    </FormWrapper>
)

Result