In this article I will explain with an example, how to validate TinyMCE Rich Text Editor or Rich TextBox using ASP.Net RequiredFieldValidator and CustomValidator.
Note: To know more about adding TinyMCE editor in ASP.Net application, refer my article Using Tiny MCE Rich TextBox in ASP.Net.
 
 
Problem with Validation of TinyMCE Editor
If you try to use ASP.Net RequiredFieldValidator, it will simply validate the Multiline TextBox and not the TinyMCE Editor and gives you Required message. This is because TinyMCE adds its content to the Multiline TextBox (TextArea) after the Button is clicked. Hence the ASP.Net RequiredFieldValidator fails to validate it first time and throw validation failed error.
 
 
Solution #1 – Using RequiredFieldValidator
In the first solution, the TinyMCE Editor is forced to copy its contents to the Multiline TextBox (TextArea) by calling its triggerSave function on the OnClientClick event of the Button.
Now before PostBack happens, the contents are present in the Multiline TextBox (TextArea) and hence the ASP.Net RequiredFieldValidator will work as intended.
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtTinyMCE" runat="server" TextMode = "MultiLine"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate = "txtTinyMCE" runat="server" ErrorMessage="Required"></asp:RequiredFieldValidator>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick = "tinyMCE.triggerSave(false,true);" />
</div>
</form>
 
 
Solution #2 – Using CustomValidator
In this solution, one can write its own validation function using JavaScript and call it using the ClientValidationFunction of the ASP.Net CustomValidator.
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtTinyMCE" runat="server" TextMode = "MultiLine"></asp:extBox>
<asp:CustomValidator ID="CustomValidator1" ClientValidationFunction = "ValidateTinyMCE" runat="server" ErrorMessage="Required"></asp:CustomValidator>
<asp:Button ID="btnSave" runat="server" Text="Save" />
</div>
</form>
<script type = "text/javascript">
    function ValidateTinyMCE(sender, args) {
        var isValid = false;
        var value = tinyMCE.get('<%=txtTinyMCE.ClientID%>').getContent();
        if (value == "") {
            args.IsValid = false;
        }
        else {
            //Check for space tag
            if (value == "<p>&nbsp;</p>") {
                //Clear TinyMCE
                tinyMCE.get('<%=txtTinyMCE.ClientID%>').execCommand('mceSetContent', false, "");
                args.IsValid = false;
            }
            else {
                args.IsValid = true;
            }
        }
    }
</script>
 
 
Downloads
Download Code