XHTML validation in ASP.NET MVC Rich Text Editor Control

4 Mar 20251 minute to read

The editor includes an EnableXhtml property that allows for continuous validation of the Rich Text Editor’s source content against the XHTML standard. When content is entered or modified in the editor, this feature ensures ongoing compliance by automatically removing invalid elements and attributes.

The editor checks the following settings on validation:

Validating Attributes

  • Case Sensitivity: All attributes must be in lowercase.
  • Quotation Marks: Proper use of quotation marks around attribute values is enforced.
  • Validity: Only valid attributes for corresponding HTML elements are allowed.
  • Required Attributes: All required attributes for HTML elements must be included.

Validating HTML Elements

  • Case Sensitivity: All HTML tags must be in lowercase.
  • Proper Closing: All opening tags must have corresponding closing tags.
  • Element Validity: Only valid HTML elements are permitted.
  • Nesting: Elements must be properly nested to maintain structure.
  • Root Element: The content must have a single root element.
  • Element Hierarchy: Inline elements cannot contain block elements.
<div class="control-section">
       @Html.EJS().RichTextEditor("form-support").EnableXhtml(true).Value(ViewBag.value).Render()
</div>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        return View();
    }
}