Example of Field Validation in React Scheduler Component


This demo shows the way of adding default and custom validation rules to the editor fields of Scheduler.

More Details...


In this demo, the specific fields of Scheduler editor window such as subject, location, description, startTime and endTime are made to undergo validation such that if it is left as blank, then the default required validation message will be displayed in a separate tooltip, on clicking a save button.

Additionally, the regex condition has been added to the location field, so that if any special characters are typed into it, then the custom validation message will be displayed. The description field has been validated to restrict the character count to be typed into it between 5 and 500 and not beyond that. This validation can be given by making use of the validation API available within each fields of eventSettings property.

Apart from this validation feature, the built-in validation has been provided to the start and end time fields - so that, when the selected end time occurs before the start time, a validation message will be displayed as well as when some unwanted characters are typed into the date fields, the invalid date message will be alerted.