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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validating custom/additional fields in the appointment window

Thread ID:

Created:

Updated:

Platform:

Replies:

141365 Dec 7,2018 10:41 AM UTC Dec 11,2018 03:42 AM UTC ASP.NET Core - EJ 2 6
loading
Tags: Scheduler
Gregory Perozzo
Asked On December 7, 2018 10:41 AM UTC

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
Replied On 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:
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
Replied On 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.


Gregory Perozzo
Replied On December 7, 2018 01:09 PM UTC

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 [Syncfusion]
Replied On 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. 


 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
Replied On 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!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On December 11, 2018 03:42 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon