Validation

The form validation has been built incorporating React Hook Form validation. The validators object contains a list of commonly used predefined validators that can be used in any form field, for example:

<Form.Section>
    <Form.SectionTitle>Sign Up</Form.SectionTitle>

    <Form.Field>
        <Form.InputLabel htmlFor='username' label='First Name' required={true} />
        <Form.InputText name='username' validators={[validators.required]}>
    </Form.Field>

    <Form.Field>
        <Form.InputLabel htmlFor='email' label='Email' required={true} />
        <Form.InputText name='email' validators={[validators.required, validators.isEmail]}>
    </Form.Field>

    <Form.Field>
        <Form.InputLabel htmlFor='password' label='Password' required={true} />
        <Form.InputText name='password' validators={[validators.required, validators.isPassword]}>
    </Form.Field>

    <Form.Field>
        <Form.InputLabel htmlFor='repeatPassword' label='Repeat Password' required={true} />
        <Form.InputText name='repeatPassword' validators={[validators.required, validators.passwordsMatch]}>
    </Form.Field>
<Form.Section>

Custom Validator

If you need to perform some validation that doesn't currently exist in the validators object, you can write a custom validator. If your validator will be used more than once in the project, add it to the validators object, otherwise, if the validation is specific to the component you are building, you can write your validation function inside your component and add it to the form field validation array, as below:

const MyForm = () => {
    const containsSubstring = (substring: string) => {
        return {
            validateContainsSubstring: (value: string) => {
                return value.includes(substring) || `The value must contain ${substring}`;
            },
        };
    };

    return {
        <Form>
            <Form.Body>
                <Form.Section>
                    <Form.Field>
                        <Form.InputLabel htmlFor='foo' label='Foo' required={true} />
                        <Form.InputText name='foo' validators={[validators.required, containsSubstring('bar')]} />
                    </Form.Field>
                </Form.Section>
            <Form.Body>
        </Form>
    }
}

File Upload Validation

The InputFileUpload component has its own set of validators, found in the validateFileUpload object. These currently include validation for file type, empty files, CSV headers and column content types. Any additional validators specific to the file upload input can be added to this object.

Some of the file upload validators require that you pass in a configuration object detailing each column; its header, the data type expected, and optionally an array of strings to compare each value against to ensure it exists within the array.

const csvFormatConfig = [
    {
        header: 'Name',
        format: FileColumnDataType.STRING,
    },
    {
        header: 'Sales',
        format: FileColumnDataType.NUMBER,
    },
    {
        header: 'Channel',
        format: FileColumnDataType.STRING_IN_ARRAY, // Check the values all exist within an array of strings
        comparisonArray: channels, // The array of strings to compare each value against
    },
]


<Form.Field>
    <Form.InputLabel htmlFor="file" label="Upload File" />
    <Form.InputFileUpload
        name="file"
        validators={[
            validateFileUpload.required,
            validateFileUpload.validateFileType(FileType.CSV),
            validateFileUpload.validateContainsData(),
            validateFileUpload.validateHeaders(csvFormatConfig),
            validateFileUpload.validateColumnValues(csvFormatConfig),
        ]}
    />
</Form.Field>