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.
No comments:
Post a Comment