Dynamic form validation in React Datepicker component

21 Feb 202618 minutes to read

Dynamic forms provide a flexible and economical approach to generate forms based on JSON configuration without requiring template modifications. This technique is particularly useful for creating reusable form components that adapt to varying data structures.

To implement dynamic form validation, create a React component (such as dynamic-form.tsx) that renders form fields based on JSON data. This component dynamically includes DatePicker fields with validation rules defined in the configuration.

The following example demonstrates how to create and validate a dynamic sign-up form with date selection:

data.jsx

export const data = {
    A_FirstName: {
        floatLabelType: 'Auto',
        key: 'FirstName',
        label: 'First Name',
        placeholder: 'First Name',
        type: 'text',
        validation: {
            required: true
        }
    },
    B_LastName: {
        floatLabelType: 'Auto',
        key: 'LastName',
        label: 'Last Name',
        placeholder: 'Last Name',
        type: 'text',
        validation: {
            required: true
        }
    },
    C_Email_ID: {
        floatLabelType: 'Auto',
        key: 'Email_ID',
        label: 'Mail ID',
        placeholder: 'Email',
        type: 'email',
        validation: {
            required: true
        }
    },
    D_Password: {
        floatLabelType: 'Auto',
        key: 'Password',
        label: 'Password',
        placeholder: 'Password',
        type: 'password',
        validation: {
            required: true
        }
    },
    E_DOB: {
        floatLabelType: 'Auto',
        key: 'DOB',
        label: 'DOB',
        placeholder: 'DOB',
        type: 'date',
        validation: {
            required: true
        },
        width: '250px'
    },
    F_Accept: {
        key: 'Accept',
        label: 'Accept terms and conditions',
        type: 'checkbox',
        validation: {
            required: true
        }
    },
    G_Submit: {
        key: 'Button',
        type: 'submit'
    },
};

data.tsx

export const data = {
     A_FirstName: {
        floatLabelType: 'Auto',
        key: 'FirstName',
        label: 'First Name',
        placeholder: 'First Name',
        type: 'text',
        validation: {
            required: true
        }
    },
    B_LastName: { 
        floatLabelType: 'Auto',
        key: 'LastName',
        label: 'Last Name',
        placeholder: 'Last Name',
        type: 'text',
        validation: {
            required: true
        }
    },
    C_Email_ID: {
        floatLabelType: 'Auto',
        key: 'Email_ID',
        label: 'Mail ID',
        placeholder: 'Email',
        type: 'email',
        validation: {
            required: true
        }
    },
    D_Password: {
        floatLabelType: 'Auto',
        key: 'Password',
        label: 'Password',
        placeholder: 'Password',
        type: 'password',
        validation: {
            required: true
        }
    },
   E_DOB: {
        floatLabelType: 'Auto',
        key: 'DOB',
        label: 'DOB',
        placeholder: 'DOB',
        type: 'date',
        validation: {
            required: true
        },
        width: '250px'
    },
    F_Accept: {
        key: 'Accept',
        label: 'Accept terms and conditions',
        type: 'checkbox',
        validation: {
            required: true
        }
    },
    G_Submit: {
        key: 'Button',
        type: 'submit'
    },
}

dynamicform.jsx

// import the Button component
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import the CheckBox component
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
// import the DatePicker component
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
// import the TextBox component
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
export default class DynamicForm extends React.Component {
    objectProps;
    constructor(props) {
        super(props);
    }
    onSubmit() {
        alert("Form submitted!!!");
    }
    renderStatus(element) {
        switch (element.type) {
            case 'date':
                return <div>
          <DatePickerComponent type={element.type} floatLabelType={element.floatLabelType} placeholder={element.placeholder} width={element.width}/>
        </div>;
            case 'checkbox':
                return <div id="checkBox">
          <CheckBoxComponent type={element.type} label={element.label}/>
        </div>;
            case 'submit':
                return <ButtonComponent id={element.type} type={element.type}> Sign up </ButtonComponent>;
            default:
                return <div id="textValue">
          <TextBoxComponent type={element.type} floatLabelType={element.floatLabelType} placeholder={element.placeholder}/>
        </div>;
        }
    }
    render() {
        this.objectProps = this.props;
        return (Object.keys(this.objectProps.dataObject).map((key, value) => {
            return (<div key={key.toString()}>
            <form onSubmit={this.onSubmit}>
              {this.renderStatus(this.objectProps.dataObject[key])}
            </form>
        </div>);
        }));
    }
}

dynamicform.tsx

// import the Button component
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import the CheckBox component
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
// import the DatePicker component
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
// import the TextBox component
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';

export default class DynamicForm extends React.Component<any, any> {
  public objectProps: any;

  constructor(props: any) {
    super(props);
  }

  public onSubmit() {
    alert("Form submitted!!!");
  }

  public renderStatus(element: any) {
    switch (element.type) {
      case 'date':
        return <div>
          <DatePickerComponent
            type={element.type}
            floatLabelType={element.floatLabelType}
            placeholder={element.placeholder}
            width={element.width} />
        </div>
      case 'checkbox':
        return <div id = "checkBox">
          <CheckBoxComponent
            type={element.type}
            label={element.label} />
        </div>
      case 'submit':
        return <ButtonComponent id={element.type}
          type={element.type}> Sign up </ButtonComponent>
      default:
        return <div id="textValue">
          <TextBoxComponent
            type={element.type}
            floatLabelType={element.floatLabelType}
            placeholder={element.placeholder} />
        </div>
    }
  }

  public render() {
    this.objectProps = this.props;
    return (
      Object.keys(this.objectProps.dataObject).map((key, value) => {
      return (
        <div key={key.toString()}>
            <form onSubmit={this.onSubmit} >
              { this.renderStatus(this.objectProps.dataObject[key]) }
            </form>
        </div>
      );
    })
   )
  }
}

index.jsx

import { data } from './data';
import DynamicForm from './dynamicform';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    data;
    constructor(props) {
        super(props);
        this.data = data;
    }
    render() {
        return (<div className="wrap">
                <div className="outerbox">
                    <div className="formValue">
                        <DynamicForm dataObject={data}/>
                    </div>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import { data } from './data';
import DynamicForm from './dynamicform';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    public data : any;

    constructor(props: any) {
        super(props);
        this.data = data;
    }

    public render() {
        return (
            <div className = "wrap">
                <div className= "outerbox">
                    <div className = "formValue">
                        <DynamicForm dataObject = {data} />
                    </div>
                </div>
            </div>
        );
     }
 }

ReactDOM.render(<App />, document.getElementById('element'));