RequiredField Validator not working with CKEditor in ASP.Net

Last month I had worked on a project where we were using CKEDITOR. For validation using asp.net required field validator. It is working for all control but unfortunately required field validator is not working for CKEDITOR.

After searching I have got the reason and solution for this.

Reason:

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.

Solution:

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,

<head>
<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() {
$('#TextBox1').ckeditor();
});

function UpdateContent() {
var ckeditorinstance = $('#TextBox1').ckeditorGet();
ckeditorinstance.updateElement();
}
</script>
</head>

<body>
<form id="form1" runat="server">
<div>
<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>
</div>
<asp:Button ID="btnSave" OnClientClick="javascript:UpdateContent()" runat="server" Text="Save" onclick="btnSave_Click" />
</body>

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.

Comments

Popular posts from this blog

The model backing the 'MyDBContext' context has changed since the database was created. Either manually delete/update the database, or call Database.SetInitializer with an IDatabaseInitializer instance. For example, the DropCreateDatabaseIfModelChanges strategy will automatically delete and recreate the database, and optionally seed it with new data.

How can I get a value of a property from an anonymous type (C#)

Check/Uncheck all items in a CheckBoxList using Javascript