Custom Validation Messages

The Scheduler provides a functionality where you can define your own custom validation messages. The validation messages for each field can be defined through the validator property of the component. The validator property can be used in scenarios with both:

• Default Edit Form
• Custom Edit Form

By defining a validation message for selected field, you are making it required in the Edit Form.

Validation messages with the default Edit Form

The following example demonstrates how we can define custom validation messages for the Description and Rooms fields in the Edit Form.

The example uses the following validator method that is passed to the validator prop of the Native Scheduler.

Copy Codevalidator(formValueGetter) {
    const desc = formValueGetter('description');
    const roomId = formValueGetter('roomId');
    return {
    description: desc ? undefined : 'Please add event description',
    roomId: roomId ? undefined : 'Please select a room for the event',
    };
}

Validation messages with a custom Edit Form

The Scheduler gives us the freedom to define custom messages in scenarios with custom Edit Form. The validation messages in such scenarios are set in a similar way to the scenarios with the built-in Edit Form.

In the following example, you can see how the Event Title and Event Description fields are set as required ones and have custom validation messages.

The the example uses the validator property to which we pass the following method:

Copy Codevalidator(formValueGetter) {
    const desc = formValueGetter('description');
    const title = formValueGetter('title');
    return {
    title: title ? undefined : 'The event should have a title',
    description: desc ? undefined : 'Please add event description',
    };
},

Suggested Links

• Native Scheduler Editing - Basic configuration
• Native Scheduler - Custom Edit Form
• Native Scheduler - Set Edit Form initial values
• API Reference of the SchedulerFormEditor
• Kendo UI for Vue Native Form