Custom validation

[Ajesh]

Hi Team,

I am working on Syncfusion scheduler controller. I have below requirement while adding and editting events.

I need to validate one dropdown based on other two controls. Please find the details below:

Kindly open the attached screenshot and refer below steps:

1) In my add event popup, I have From date, To date and Location fields.(Attached screenshot)

2) I need to validate Location field based on From and To

3) If selected location is "Delegare Lounge" amd selected dated range falls between a particular period - I need to show below validation message on Location field

4) Location - Delegate Lounge is not allowed in the selected date range.

5) Please note that this date range for validation is coming from database(Not same for Dev, QA and production). So I cannot hard code this.

Example - If my validation range(Which is coming from database) is 01-Jan-2020 - 01-March-2020 and user select date as 1st april 2020 10AM- 1st april 2020 11AM - with location "Delegare Lounge" -  I need to show validation message - Location - Delegate Lounge is not allowed in the selected date range.

Thanks in advance

Ajesh

Attachment: CustomValidation_3aca98a8.7z

[Balasubramanian Sattanathan]

Hi Ajesh, 

Thanks for contacting Syncfusion Support. 

We have validated your requirement at our end and prepared a sample based on that by using validation rules which can be viewed from the below link. 

Sample: https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/editor-template/#apply-validations-on-editor-template-fields 

Default window: https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/editor-template/#field-validation 

Custom window: https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/editor-template/#apply-validations-on-editor-template-fields 

Kindly refer and follow the above links, let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Balasubramanian Sattanathan]

Hi Ajesh, 

Kindly ignore the previously attached sample link and refer the below. 

https://stackblitz.com/edit/editor-window-fields-validation?file=index.js 

Regards, 

Balasubramanian S 

[Ajesh]

Thank you!!!

This is exactly what I need - https://stackblitz.com/edit/editor-window-fields-validation?file=index.js 

But I am using the scheduler with .Net MVC - Html.EJS().Schedule.

Can you provide the similar link suitable for Net MVC please (which uses Html.EJS()) ?

[Ajesh]

Hi Balasubramanian,

I am using the scheduler with .Net MVC - Html.EJS().Schedule.

I would like to do the same validation which you have provided in - https://stackblitz.com/edit/editor-window-fields-validation?file=index.js 

Below are the requirements.

1) I need to validate one field based on other field(For example, If date selected is after a particular date then I need to apply some validation on a dropdown)

2) I would like to apply min date validation.(Date selected should be greater than a particular date)

Could you help ASAP please ?

[Balasubramanian Sattanathan]

Hi Ajesh, 

Thanks for the reply. 

We have validated your requirement at our end and prepared a sample based on that by making use of the FormValidator like the below code snippet. 

<script type="text/javascript"> 

    var customFn = function (args) { 

        return (new Date(args.element.value).getFullYear() > 1990 && new Date(args.element.value).getFullYear() < 2020); 

    }; 

 

    function onPopupOpen(args) { 

        if (args.type === 'Editor') { 

            if (!ej.base.isNullOrUndefined(document.getElementById("EventType_Error"))) { 

                document.getElementById("EventType_Error").style.display = "none"; 

                document.getElementById("EventType_Error").style.left = "351px"; 

            } 

            var formElement = args.element.querySelector('.e-schedule-form'); 

            var statusElement = args.element.querySelector('#EventType'); 

            if (!statusElement.classList.contains('e-dropdownlist')) { 

                var dropDownListObject = new ej.dropdowns.DropDownList({ 

                    placeholder: 'Select a status', value: statusElement.value, 

                    dataSource: ['New', 'Requested', 'Confirmed'], 

                    select: valueChange 

                }); 

                dropDownListObject.appendTo(statusElement); 

            } 

            function valueChange() { 

                if (!ej.base.isNullOrUndefined(document.getElementById("EventType_Error"))) { 

                    document.getElementById("EventType_Error").style.display = "none"; 

                } 

            } 

            var startElement = args.element.querySelector('#StartTime'); 

            if (!startElement.classList.contains('e-datetimepicker')) { 

                new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 

            } 

            var endElement = args.element.querySelector('#EndTime'); 

            if (!endElement.classList.contains('e-datetimepicker')) { 

                new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 

            } 

            var validator = (formElement).ej2_instances[0]; 

            validator.rules = { 

                Subject: { required: true }, 

                EventType: { required: true }, 

                StartTime: { required: true, range: [customFn, "Please select a date between years from 1990 to 2020"] }, 

                EndTime: { required: true, range: [customFn, "Please select a date between years from 1990 to 2020"] } 

            }; 

            validator.dataBind(); 

        } 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/160456/ze/schedule_field_validation-884155280.zip 

UG: https://ej2.syncfusion.com/aspnetmvc/documentation/numerictextbox/how-to/perform-custom-validation-using-form-validator/ 

Kindly refer to the above solution and let us know if this is helpful. 

Regards, 

Balasubramanian S