Fluentui: How to implement form validation

[nero120]

I can't see how best to implement form validation using the input controls. TextField, for example, has props for implementing validation in the UI, but how best to tie this in with a form onSubmit event? How can you trigger the TextField validation if the user never enters the field but just clicks the form submit button, TextField has no public validate or isValid props that could be interacted with in onSubmit...

Are there any examples or patterns available that implement form validation using the office ui fabric react controls?

[vertonghenb]

Nero,

You have multiple options:
Experiment with the Form components from the Experiments package, which does form validation.
Since it wasn't really my cup of tea, I used the ValueLink package and "subclassed" the normal React Fabric components.

In my opinion it gives the right flexibility and control of your form, we might want to discuss this idea further.

Example subclassing the React Fabric Component

import * as React from 'react';
import { TextField, ITextFieldProps } from "office-ui-fabric-react/lib/TextField";
import { Link } from 'valuelink/lib';

export interface IFormTextFieldProps extends ITextFieldProps {
    valueLink: Link<any>;
}

export function FormTextField(props: IFormTextFieldProps) {
    const { valueLink } = props;
    return (
        <TextField
            {...props}
            value={String(valueLink.value)}
            onChanged={(newValue) => valueLink.set(newValue)}
            errorMessage={valueLink.error}
        />
    );
}

Example the form itself

import * as React from 'react';
import { FormTextField } from "../../../Components/Form/FormTextField";
import * as validator from '../../../Constants/ErrorMessages';
import { Link, LinkedComponent } from 'valuelink';

export interface IMyFormProps {
}

export interface IMyFormState {
    firstName: string;
    lastName: string;
}

export default class MyForm extends LinkedComponent<IMyFormProps, IMyFormState>  {
    constructor(props: IMyFormProps) {
        super(props);
        this.state = {
            firstName: '',
            lastName:  ''
        };
    }

    render() {
        const firstNameLink = this.linkAt('firstName')
        .check( x => x.length >= 0 && x.length <= 100, 'Firstname must be between 0 and 100 in length' );

        const lastNameLink = this.linkAt('lastName')
            .check(x => validator.isRequired(x), validator.isRequiredMessage) 
            .check( x => x.length >= 0 && x.length <= 100, 'Lastname must be between 0 and 100 in length' );
            // Add as many checks as you'd like, chain them, validates the boolean.

        return (
            <form>
                <FormTextField label="Firstname" valueLink={firstNameLink}/>
                <FormTextField label="Lastname" valueLink={lastNameLink}/>
            </form>
        );
    }
}

Please note the the validator is something custom, you can easily roll one yourself or use other packages.

export const isRequired = (x: string | number | undefined | {}) => x != null && x !== '';
export const isRequiredMessage: string = "This field is required";

If you want more control, you can add all links to an array and validate them if they have error messages on the onSubmit action of the form for example.

[nero120]

Interesting, thanks for the great info @vertonghenb. I'll take a closer look at both.

[vamsi981]

Hello @vertonghenb @nero120 any Luck on the validation of Office fabric react Components. can you share some of the examples for peoplepicker and input fields

[NavaneethaDev]

Hello @nero120 @vertonghenb @vamsi981 could you please share some links for validation of Office UI Fabric react components.

I have components like Text Field , DropDown, Date Picker. Could you please tell me how to perform validation on click on submit button.

I am also using TaxonomyPicker. Please let me know how to make mandatory and perform validation thanks!
https://github.com/SharePoint/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/TaxonomyPicker.md

[lipalath-ms]

Curious to know if there is a way for link/url validation in Fabric instead of using a Regular Expression. Thank you!