Home » CodeDigest


Using RequiredField Validator with CKEditor in ASP.Net
Submitted By Satheesh Babu B
On 3/16/2010 8:45:26 AM
Tags: ASP.Net,CodeDigest  

Using RequiredField Validator with CKEditor in ASP.Net


By default, the requiredfield validator control will not work properly when it is used with a textarea that is configured with CKEditor. This is due to the fact that, the CKEditor content will not be synched to the page element(textarea) properly when the validator control fire.
To overcome this difficulty, we need to call the method .updateElement() in order to sync or post the content back to the textarea. The below code does that,


<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>

    <script type="text/javascript" src="ckeditor/adapters/jquery.js"></script> 

    <script type="text/javascript" language="javascript">

        $(document).ready(function() {




        function UpdateContent() {          

            var ckeditorinstance = $('#TextBox1').ckeditorGet();






    <form id="form1" runat="server">


        <asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"></asp:TextBox> 

         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

        ControlToValidate="TextBox1" ErrorMessage="No content in CKEditor!"></asp:RequiredFieldValidator> 


    <asp:Button ID="btnSave" OnClientClick="javascript:UpdateContent()" runat="server" Text="Save" onclick="btnSave_Click" />

In the above code, the javascript method UpdateContent() will update the page elements with ckeditor content whenever tha Save button is clicked. Thus, on save click the requiredfield validator control will fire properly now.

Read my article on CKEditor below,

Using CKEditor 3.x[aka FCKeditor] in ASP.Net

Using CKEditor 3.x [a.k.a FCKeditor] with jQuery in ASP.Net

Happy Coding!!!

Do you have a working code that can be used by anyone? Submit it here. It may help someone in the community!!

Recent Codes
  • View All Codes..