cannot validate field in fckeditor

Question

User-552596657 posted
i'm using the fckeditor as the rich text box control. The problem is, it cannot validate the value correctly. For example, When i've inserted a text in the rich text box control, i click the submit button. Then, the requiredfieldvalidator indicates that the field is still empty. How to fix this problem?

 

Answer 1

User-997367894 posted

hi,

 i am in the same boat. Please let me knw if you have solved the issue.

Please let me know as soon a possible as the site is "UP n Live" n i am not able to fix the validation of fckeditor.

Kind Regards 

Yoshita Nanda
 

Answer 2

User1351325556 posted

According to the FCKEditor wiki: 

 "FCKeditor will not work properly with the Required Field Validator when the "EnableClientScript" property of the validator is set to "true" (default). Due to a limitation in the default validation system, you must set it to "false".

If you want to do client side validation, you must use a Custom Validator instead and provide the appropriate validation function, using the FCKeditor JavaScript API."

So the simple solution is: Disable client side validation for the control. (IE you add EnableClientScript="False" to the validator properties).

Regarding how to hook up a client side custom validator to the FCKEditor JavaScript API: Can anyone offer help on how to do this?

Answer 3

User-677225499 posted

<asp:CustomValidator runat="server" ID="cvBody" ControlToValidate="txtHTMLBody" SetFocusOnError="true" Display="dynamic" Text="The Body is required" ClientValidationFunction="ValidateBody" ValidateEmptyText="true" ValidationGroup="Newsletter"></asp:CustomValidator>

Make sure you include ValidateEmptyText="true" 

Normally (without FCKEditor) the client side validator would look like this:    

 <script type="text/javascript">
  function ValidateBody(source, args)
  {
    args.IsValid = args.Value != "";
  }
</script>

but for FCKEditor you need to use the FCKEditor Javascript API in order to avoid the double submit problem

 
  <script type="Text/javascript">
    var fckBody;
    function ValidateBody(source, args)
    {
      args.IsValid = fckBody.GetXHTML(true) != "";
    }
    function FCKeditor_OnComplete(fckInstance)
    {  
      fckBody = fckInstance;
    }
  </script>
 
  

Answer 4

User-535404256 posted

Hello,

I have used the FCkEditor javascript API to validate input. I am using Customvalidator.

All goes well on first time. But when page is posted back and I make the all empty. validator do not get fired.

Why so ? 

Answer 5

User-51021203 posted
But i am not able to validate value of fck editor in client side, if i want to validate is fck editor is blanck or not

Answer 6

User2008424322 posted

Hi,
Declare a Custom Validator like this..

<asp:CustomValidator runat="server" ID="cvBody" SetFocusOnError="true" Display="dynamic" Text="The Body is required" ClientValidationFunction="ValidateContentText"></asp:CustomValidator>

Add this Javascript function to your page

function ValidateContentText(source,args)
{
        var fckBody= FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID %>');                 
        args.IsValid = fckBody.GetXHTML(true) != "";          
}

Answer 7

User1952191856 posted

 I modified what virendra1983 had just a bit.  I was getting an due to having <%=FCKeditor1.ClientID %> within the javascript.

 

 <script type="text/javascript">
     function ValidateContentText(source,args)
     {
          var fckinEditorClientID = document.getElementById('hdfFCKClientID');              
          var fckBody= FCKeditorAPI.GetInstance(fckinEditorClientID.value);                
          args.IsValid = fckBody.GetXHTML(true) != "";                     
     }
     </script>

 

<FCKeditorV2:FCKeditor ID="fckContent" runat="server"></FCKeditorV2:FCKeditor> 

<asp:CustomValidator runat="server" ID="cvContent" SetFocusOnError="true" ValidationGroup="Insert" Display="dynamic" Text="Content is required" ClientValidationFunction="ValidateContentText"></asp:CustomValidator>

 <asp:HiddenField ID="hdfFCKClientID" runat="server" />

 

 codebehind page:

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { hdfFCKClientID.Value = fckContent.ClientID; } }  

Answer 8

User150341185 posted

Hi

This works perfectly. However when I apply a master page (.net 2.0) to this, the validation is not fired.

Any ideas????

Answer 9

User150341185 posted

Hi

Just found the way for this. I changed the line above to this one:

 var fckinEditorClientID = document.getElementById('ctl00_ContentPlaceHolder1_hdfFCKClientID');

 The thing is all control names used in a master page change in the browser output (see source page) . So hidden control

'hdfFCKClientID' becomes 'ctl00_ContentPlaceHolder1_hdfFCKClientID'.

I dont think it's very elegant and I'm sure there will be better ways to do it. But this works for me so far!

Answer 10

User647540711 posted

Here's some (rather verbose) code I use to do server side validation. The example is for an update - when the input is invalid the details view re-opens with all the form fields populated with whatever was there when the form was submitted. On an insert it just opens an empty form - inconvenient for the user but I can't think of a workaround.

string descriptionShort = ((FCKeditor)FooView.FindControl("CkeDescriptionShort")).Value;

string descriptionLong = (((FCKeditor)FooView.FindControl("CkeDescriptionLong")).Value).Replace("<br />", "");

string active = ((CheckBox)FooView.FindControl("ActiveCheckBox")).Checked.ToString();

// Validate the editor input. Minimums are set = 7 so as to consider the <p></p> tags

int descriptionShortLength = ((FCKeditor)FooView.FindControl("CkeDescriptionShort")).Value.Length;

int descriptionLongLength = ((FCKeditor)FooView.FindControl("CkeDescriptionLong")).Value.Length;

int descriptionShortLengthMin = 7;

int descriptionShortLengthMax = 100;

int descriptionLongLengthMin = 7;

int descriptionLongLengthMax = 500;

if (descriptionShortLength < descriptionShortLengthMin)

{

ServerSideValidationLabel.Text = "You must provide a short description.";

FooView.ChangeMode(DetailsViewMode.Edit);

FooView.Visible = true;

}

else if (descriptionShortLength > descriptionShortLengthMax)

{

ServerSideValidationLabel.Text = "Your description is too long, please edit it by removing " +(descriptionShortLength - descriptionShortLengthMax) + " characters from your input.";

FooView.ChangeMode(DetailsViewMode.Edit);

FooView.Visible = true;

}

else if (descriptionLongLength < descriptionLongLengthMin)

{

ServerSideValidationLabel.Text = "You must provide a long description.";

FooView.ChangeMode(DetailsViewMode.Edit);

FooView.Visible = true;

}

else if (descriptionLongLength > descriptionLongLengthMax)

{

ServerSideValidationLabel.Text = "Your description is too long, please edit it by removing " +

(descriptionLongLength - descriptionLongLengthMax) + " characters from your input.";

FooView.ChangeMode(DetailsViewMode.Edit);

FooView.Visible = true;

}

else

{

//If the editor input is valid pass validation process to Page validation

if (Page.IsValid)

{

// Pass your parameters to the DAL or whatever

}

else

{

ServerSideValidationLabel.Text = "There was a problem updating the form.<br />Please check for " +

"missing values or incorrect formats.<br />";

FooView.Visible = true;

}

}

Answer 11

User1078145427 posted

Hey virendra,

Thank you very much . I got succeeded with your code. 

 

Answer 12

User1139976008 posted

 Hi,

  I was having the same problem and got very easy solution. Change RequiredFieldValidator's properties EnableClientScript=False and InitialValue=<br />. RequiredFieldValidator works fine.

Answer 13

User-1001941920 posted

Unfortunately none of above solutions worked for me. When I click Save button on my page, the code for the button executes and data validity control code handles empty FCKEditor. Customvalidator does not seem to do anything. I get no client side errors but no reaction as well. I think setting EnableClientScript to false makes my button code execute before customvalidator mechanism. I'll try to overcome that problem and let you know if I find another solution.

Answer 14

User-1960085 posted

Slight modification of the code above, a "cleaner" way of finding the FCKEditor id:

<asp:CustomValidator runat="server" ID="cvBody" SetFocusOnError="true" Display="Dynamic" ControlToValidate="BodyEditor1"
                            Text="You cannnot send a blank message" ClientValidationFunction="ValidateContentText"  ValidationGroup="Announcement"></asp:CustomValidator>

<FCKeditorV2:FCKeditor ID="BodyEditor1" runat="server" Value='<%# Bind("Body") %>'></FCKeditorV2:FCKeditor>

function ValidateContentText(source, args) {
        var BEditor = source.id.replace(/cvBody$/, "BodyEditor1");
        var fckBody = FCKeditorAPI.GetInstance(BEditor);
        args.IsValid = fckBody.GetXHTML(true) != "";
    }

Where cvBody is the .net name of your CustomValidator and BodyEditor1 is the .net name of your FCKEditor.

Also your validator will need to be nested in the same control/area as the FCKEditor for the regex to properly convert one to the other.

                        

Answer 15

User-1001941920 posted

Ok. What worked in client side for me (although I couldn't manage to make AJAX.NET validator callout extender to display its message properly and had to cancel it and were forced to use classic required field validator instead) is as below:

<asp:CustomValidator ID="cvKampanya" runat="server" ClientValidationFunction="ValidateFCK" ControlToValidate="mKampanya" Display="Dynamic" ErrorMessage="Enter message" Font-Bold="True" Font-Size="Small" SetFocusOnError="True" ValidateEmptyText="True"></asp:CustomValidator>
<FCKeditorV2:FCKeditor ID="mKampanya" runat="server" BasePath="/Bodrum-Guide/MetinEditoru/" Height="500px" Width="100%" ToolbarSet="Bodrum"></FCKeditorV2:FCKeditor>

<script language="javascript" type="text/javascript">
function ValidateFCK(source, args) {
var fckBody = FCKeditorAPI.GetInstance('<%=mKampanya.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}
</script>