required field validation does not work properly in wysiwyg mode.

[David Smith]

Setting required field in model does not work when in wysiwyg mode (it does when in source code mode). In wysiwyg mode <p> tags are inserted even if the text box is blank. Thus bypassing required field validation.  Confirmed by using WebDeveloper F12 in Chrome. As a  temporary , hack, work around I have to set a MinLength.

 <EditForm Model="@Model" OnValidSubmit="@HandleSubmit">

                        <DataAnnotationsValidator />

                        <div class="form-group border rounded bg-light bg-opacity-25">

                            <SfRichTextEditor @bind-Value="Model.Announcement">

                                <RichTextEditorToolbarSettings Items="@Items" EnableFloating="false" />

                            </SfRichTextEditor>

                            <ValidationMessage For="@(() => Model.Announcement)" />

                            <button CssClass="e-primary" IconCss="fa fa-save">Update Announcement</button>

                        </div>

                    </EditForm>

---------------------------------------------------------------------------------------------------------------

[Required(ErrorMessage = "Announcement is Required.")]

        [MinLength(12, ErrorMessage = "The minimum length of this field is {1} characters.")]

        public string? Announcement { get; set; }

[Vinitha Jeyakumar]

Hi David,

We have considered your reported query "Required field validation is not working properly with RTE inside EditForm" as a bug from our end and the fix for the issue will be included with our upcoming Vol 2 2022 SP release which is expected to be rolled out on the mid of August 2022.

Now you can track the status of the reported issue through the below link,

https://www.syncfusion.com/feedback/36671/required-field-validation-is-not-working-properly-with-rte-inside-editform

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi David,

We are glad to announce that our Essential Studio 2022 Volume 2 SP release v20.2.0.43 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/176701/essential-studio-2022-volume-2-service-pack-release-v20-2-0-43-is-available-for-download

We have also included the fix for the reported issue "Required field validation is not working properly with RTE inside EditForm" with our Vol 2 2022 SP release. So please upgrade your package to the latest to resolve the issue from your end.

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you require any further assistance.

Regards,

Vinitha

[David Smith]

Upgrading to 20.2.0.43 (all packages) does not resolve the issue "Required field validation is not working properly with RTE inside EditForm" (Preview mode) Even this RTE you have in this reply box does not seem to handle "Required field validation" , You have the same hack workaround that I do This field must contain more than five characters.

[Vinitha Jeyakumar]

Hi David,

We have tried to replicate the reported issue in the V20.2.43. but we didn't face any issue as you reported and the Rich Text Editor field also getting validated for required field. please check the sample and video illustration for your reference,

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vid_RTEValid-1873266672

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Server929268618

Can you please share us with issue replicating video illustration and runnable issue replicating sample or modify the attached sample with the issue reproducing code to further validate on our end.

Regards,

Vinitha

[David Smith]

To replicate the problem , you can do one of two things.

1. type something into the text box (wysiwyg mode) and then delete it before submitting.
   Since you typed something in there it gets wrapped in <p> tags but when you delete it the <p> tags remain.
2. 2 prepopulate the text box on loading with an entry that you previously submitted to a database. 
   That database entry has the <p> tags as well (which you don't see in wysiwyg mode) and when you delete that entry in wysiwyg mode, The <p> tags remain. 

You can confirm this by going into webdeveloper mode on your browser and finding that in the code that the <p> tags are there.

[Vinitha Jeyakumar]

Hi David,

We have also tried to replicate the issue by following the steps you have provided but, validation has been done correctly even when we type and delete the texts before submitting. please check the video below,

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Valid-785132591

Please provide us with the issue reproducing sample to further validate on the issue.

Regards,

Vinitha