BoldDesk®Customer service software offering ticketing, live chat, and omnichannel support, starting at $49/mo. for 10 agents. Try it for free.
Is there any way to leverage the client-side validation that comes delivered with an AspNetCore razor page project with the rich text editor? I have localized all my error messages, and I am able to perform easy client-side validation for my razor page and my page model via data annotations.
The example you provide shows a bunch of additional javascript, which I was hoping to avoid. In addition, it involves enabling and disabling the submit button.
Validation in ASP.NET CORE Rich Text Editor Component
In order to use the delivered client-side validation, the span tag needs to be placed next to the control it will validate. Unfortunately, synchfusion rich text editor parent tag " ejs-richtexteditor" does not allow the use of a child span tag.
"Severity Code Description Project File Line Suppression State
Error (active) RZ2010 The <span> tag is not allowed by parent <ejs-richtexteditor> tag helper. Only child tags with name(s) 'e-content-template, e-richtexteditor-toolbarsettings, e-richtexteditor-quicktoolbarsettings, e-richtexteditor-pastecleanupsettings, e-richtexteditor-iframesettings, e-richtexteditor-insertimagesettings, e-richtexteditor-importword, e-richtexteditor-exportword, e-richtexteditor-exportpdf, e-richtexteditor-insertaudiosettings, e-richtexteditor-insertvideosettings, e-richtexteditor-tablesettings, e-richtexteditor-inlinemode, e-richtexteditor-format, e-richtexteditor-fontfamily, e-richtexteditor-fontsize, e-richtexteditor-fontcolor, e-richtexteditor-backgroundcolor, e-richtexteditor-formatter, e-richtexteditor-filemanagersettings, e-richtexteditor-bulletformatlist, e-richtexteditor-numberformatlist, e-richtexteditor-formatpaintersettings, e-richtexteditor-emojipickersettings, e-richtexteditor-slashmenusettings' are allowed. Razor.Portal"
Hi Jaime Martinez,
We have validated your reported query and created a sample demonstrating ASP.NET Core's client-side validation based on the information you shared. Unfortunately, we were unable to replicate the issue you faced on our end.
The <span> element with asp-validation-for shows the validation message. Please take a look at the following code sample for your reference.
Index.cshtml
@model WebApplication1.Models.InputViewModel
<form asp-action="Index" method="post"> <div class="form-group"> <label asp-for="InputValue"></label> <ejs-richtexteditor id="ContentEditor" ejs-for="InputValue" class="form-control"></ejs-richtexteditor> <!-- Display validation message --> <span asp-validation-for="InputValue" class="text-danger"></span> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
@section Scripts { @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); } } |
If you are still facing a problem on your end, could you please share the following information to help us replicate the issue?
Regards,
Vinothkumar
The sample you provided was for MVC, I am using Razor Pages.
Client side validation never works for the RTE. I believe it is caused by the two div tags 1)RTE toolbar 2)RTE Content in between the span tag and the textarea. I have attached some code and screenshots
Hi Jaime Martinez,
We have created a sample using Razor Pages and implemented form validation in the Rich Text Editor. However, we were unable to replicate the issue you faced on our end. Please see the attached sample for your reference.
Additionally, we would like to inform you that the error message you shared seems to indicate that you have wrapped the error <span> tag inside the ejs-richtexteditor. You cannot add the error <span> tag inside the editor wrapper; it needs to be placed next to the Rich Text Editor.
<form class="row g-3" method="post"> <div class="col-12"> <span><label asp-for="Input.Name" class="form-label"></label> <i class="fa-solid fa-circle-info"></i></span> <ejs-richtexteditor ejs-for="Input.Name" showCharCount="true" maxLength="1000" enableHtmlSanitizer="true"> <e-richtexteditor-pastecleanupsettings deniedTags="@tagsNotAllowed"></e-richtexteditor-pastecleanupsettings> <e-richtexteditor-toolbarsettings items="@toolBarItems"></e-richtexteditor-toolbarsettings> </ejs-richtexteditor> <span asp-validation-for="Input.Name" class="text-danger"></span> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> |
If you are still facing an error, could you please share the following information? It will help us replicate the issue on our end:
Regards,
Vinothkumar
You are correct its validating on the server after the server side post.
I am saying that jquery client side validation with the rich text editor is not working to prevent the server side post
I assumed that jquery client side validation would work with the rich text editor, but it does not work even with your example.
I now assume I can only validate the rich text editor on the server side when the form is posted back..
It appears that I can only do client side validation prior to a post by writing custom javascript as in your example below..
Validation in ASP.NET CORE Rich Text Editor Component
I was hoping jquery validation would prevent the form from posting if the rich text editor is blank with the data annotations on the model. In addition, I would also perform server side validation by checking if the model state is valid.
Are my assumptions correct?
Hi Jaime Martinez,
We have created a sample that demonstrates jQuery client-side validation with the Rich Text Editor. In this sample, we use the validate() method to apply validation rules. Inside the submitHandler, we check the editor content using the getText() method. If the content is empty, the form submission is prevented by returning false. If the editor contains content, the form is submitted by calling the submit() method. Please refer to the following code for your reference.
<form asp-action="Submit" method="post" id="myForm"> <div> <label for="Name"></label> <ejs-richtexteditor id="Name" htmlAttributes="customAttribute" showCharCount="true" maxLength="1000" enableHtmlSanitizer="true" created="created"> <e-richtexteditor-pastecleanupsettings deniedTags="@tagsNotAllowed"></e-richtexteditor-pastecleanupsettings> <e-richtexteditor-toolbarsettings items="@toolBarItems"></e-richtexteditor-toolbarsettings> </ejs-richtexteditor> <span for="Name" class="text-danger"></span> </div> <button type="submit">Submit</button> </form> <script> var rteObj; function created() { rteObj = this; } $(document).ready(function () { $("#myForm").validate({ rules: { Name: { required: true, minlength: 2 } }, messages: { Name: { required: "Please enter your name", minlength: "Your name must consist of at least 2 characters" } }, submitHandler: function (form) { if (rteObj.getText() == "") { alert("Form is valid but submission is prevented!"); // Prevent form submission return false; } form.submit(); } }); }); </script> |
API Link: Rich Text Editor Documentation
Please feel free to reach out if you need further assistance or have any additional concerns.
