We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Validating custom/additional fields in the appointment window


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'?

6 Replies

FS Florian Schwendtner December 7, 2018 11:52 AM UTC

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:

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

GP Gregory Perozzo December 7, 2018 12:45 PM UTC

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.

GP Gregory Perozzo December 7, 2018 01:09 PM UTC


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

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

Thank you!

VD Vinitha Devi Murugan Syncfusion Team December 8, 2018 07:06 AM UTC

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. 


   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"; 
                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; 

M.Vinitha devi. 

GP Gregory Perozzo December 10, 2018 07:55 PM UTC

Hello Vinitha,

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

Thank you very much for your help!

KK Karthigeyan Krishnamurthi Syncfusion Team December 11, 2018 03:42 AM UTC

Hi Gregory,  
We are happy that our solution fulfilled your requirement. 

Live Chat Icon For mobile
Up arrow icon