Schedular : Add Title Validation.

[Sinchan NIkam]

Dear Team,

When we add a meeting without entering meeting title in "Add Title" TextBoxComponent.

By default, it takes "Add Title" as a text and save the event.

We have requirement to validate the text before saving and when doing that the Add pop closes automatically.

Please provide us the solution to keep the popup as it and validate the entered text.

Regards,

Sinchan

[Vengatesh Maniraj]

Hi Sinchan, 

Greetings from Syncfusion Support. 

We have checked your requirement and prepared sample based on that using popupClose event like below code snippet.  

this.fieldSettings = { 

      subject: { 

        name: 'Subject', 

        validation: { 

          required: true 

        } 

      } 

} 

 

onPopupClose(args) { 

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

      var firstChar = args.data.Subject.charCodeAt(0); 

      if (!((firstChar > 64 && firstChar < 91) || (firstChar > 96 && firstChar < 123) || firstChar == 8 || firstChar == 32 || (firstChar >= 48 && firstChar <= 57))) { 

        args.cancel = true; 

        alert("First letter should be an alphabet"); 

      } 

    } 

} 

 

Sample : https://stackblitz.com/edit/react-qpyuri-1cwpqh?file=index.js 

eventSettings Fields : https://ej2.syncfusion.com/react/documentation/schedule/appointments/#event-field-settings 

popupClose event: https://ej2.syncfusion.com/react/documentation/api/schedule/#popupclose 

Kindly try the above sample and let us know if you need any further assistance on this. 

 

Regards, 

Vengatesh  

[Vinayak]

Hi Sinchan, 

Greetings from Syncfusion Support. 

We have checked your requirement and prepared sample based on that using popupClose event like below code snippet.  

this.fieldSettings = { 

      subject: { 

        name: 'Subject', 

        validation: { 

          required: true 

        } 

      } 

} 

 

onPopupClose(args) { 

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

      var firstChar = args.data.Subject.charCodeAt(0); 

      if (!((firstChar > 64 && firstChar < 91) || (firstChar > 96 && firstChar < 123) || firstChar == 8 || firstChar == 32 || (firstChar >= 48 && firstChar <= 57))) { 

        args.cancel = true; 

        alert("First letter should be an alphabet"); 

      } 

    } 

} 

 

Sample : https://stackblitz.com/edit/react-qpyuri-1cwpqh?file=index.js 

eventSettings Fields : https://ej2.syncfusion.com/react/documentation/schedule/appointments/#event-field-settings 

popupClose event: https://ej2.syncfusion.com/react/documentation/api/schedule/#popupclose 

Kindly try the above sample and let us know if you need any further assistance on this. 

 

Regards, 

Vengatesh  

Tried with your code. "Add title" validation is working but facing another issue because of that.

Please find attachment for the reference.

Attachment: QuickInfo_Close_367c2ebd.zip

[Vengatesh Maniraj]

Hi Vinayak, 

Thanks for the update. 

 

We have validated the shared images at our end and we have prepared the below sample based on the images but we could not reproduce the reported issue in that sample. For your reference we have shared the video demo which is available in below link.  

 

Video   : https://www.syncfusion.com/downloads/support/forum/150478/ze/QUICK-~1734889176 

Sample: https://stackblitz.com/edit/react-quick-popup-validation-mbohkj?file=index.js 

Kindly try the below sample and if the issue still exists at your end, please try to reproduce the reported issue in the above sample or else share the video demo / issue replication steps for serve  you better. 

Regards, 

Vengatesh 

[Vinayak]

Hi Vengatesh,

Issue is on Close Button click, it is validating the rule. Validation should only be run only on 'Save / Add' button.

When I add title and Click on save button or close button, showing error in console is ....

"Uncaught DOMException: Failed to execute 'closest' on 'Element': '.' is not a valid selector"

I found the exact same scenario in your demo code : https://ej2.syncfusion.com/react/demos/schedule/editor-validation/

[Vengatesh Maniraj]

Hi Vinayak, 

Thanks for the update. 

 

We have validated the reported problem in shared link and found the cause for this issue is that the shared link sample refers our old packages. So that, the reported problem is occurs. We have fixed this issue in our latest package and we would refreshed our demo separate samples with latest packages soon. So we suggest you to upgrade your package to latest version and if still face the issue please share your package version. 

 

Kindly revert us for further assistance. 

Regards, 

Vengatesh.