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() {
$('#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" />
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!!!
|