Validating custom/additional fields in the appointment window

[Gregory Perozzo]

Hello,

I'm trying to validate the custom fields I added to the appointment window.

This is my .cshtml using the 'required' keyword:

But when I click 'Save' on the appointment window, this is what happens:

The tooltip is not aligned in the field. How can I correct this? And how can I translate the message 'This field is required'?

[Florian Schwendtner]

Hi Gregory,

just today i wanted to ask the same question about the validation message alignment. 

For the localization/globalization i found another thread - not shure if this is a good way to go but if it has to be that complicated maybe its a workaround. Like you i just want to provide a GLOBAL globalization string for that messages... 

Here is the globalization link:

https://www.syncfusion.com/forums/139185/solved-how-i-can-add-localization-in-validationrules-tooltips 

And here is my similiar problem (the identity is not required - its the "Nummer" but its misaligned):

[Gregory Perozzo]

Hello Florian,

Thank you very much for answering my questions!

I will look at this link: https://www.syncfusion.com/forums/139185/solved-how-i-can-add-localization-in-validationrules-tooltips and see if I can get it done.

Let's wait for a solution for the alignment issue.

Have a nice day.

[Gregory Perozzo]

Florian,

Unfortunately the link is a solution that works only for the ejGrid.

I'll try to adapt that and make it work.

Thank you!

[Vinitha Devi Murugan]

Hi Gregory, 

Thank your for contacting Syncfusion support. 

We have checked your query and you can achieve your requirement by making use of popupOpen event. Please refer to the below code example and sample link. 

Sample Link: http://www.syncfusion.com/downloads/support/forum/141365/ze/CustomValidationMessage320341742  

 popupOpen="onPopupOpen" 

   function onPopupOpen(args) { 

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

            if (typeof (document.getElementById("EventType_Error")) == 'undefined') { 

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

            } 

            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: 'Choose status', value: statusElement.value, 

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

                    change: function () { 

                        if (typeof (document.getElementById("EventType_Error")) != 'undefined') { 

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

                        } 

                    } 

                }); 

 

                dropDownListObject.appendTo(statusElement); 

                statusElement.setAttribute('name', 'EventType'); 

            } 

 

            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.addRules('EventType', { required: [true, 'O campo é obrigatório'] }); 

        } 

    } 

Please use below highlighted code to overcome alignment issue. 

@*Alignment CSS for error message*@ 

<style type="text/css"> 

    .e-tooltip-wrap.e-schedule-error { 

        top: 38px !important; 

        margin-left: 200px; 

    } 

</style> 

Regards, 

M.Vinitha devi. 

[Gregory Perozzo]

Hello Vinitha,

I did what you told and it's working as expected!

Thank you very much for your help!

[Karthigeyan Krishnamurthi]

Hi Gregory,  

 

We are happy that our solution fulfilled your requirement. 

 

Regards, 

Karthigeyan