locked
cannot validate field in fckeditor RRS feed

  • 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?

     

    Monday, August 28, 2006 2:34 AM

All replies

  • 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
     

    Saturday, September 2, 2006 8:14 AM
  • 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?

    Monday, August 6, 2007 6:56 AM
  • 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>
     
     
    Tuesday, August 28, 2007 2:33 AM
  • 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 ? 

    Monday, September 10, 2007 5:27 AM
  • 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
    Friday, March 14, 2008 6:30 AM
  • 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) != "";          
    }

    Friday, March 14, 2008 6:40 AM
  • 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; } }  
    Tuesday, May 6, 2008 3:48 PM
  • 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????

    Wednesday, November 19, 2008 6:12 AM
  • 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!

    Wednesday, November 19, 2008 9:33 AM
  • 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;

    }

    }

    Friday, November 21, 2008 4:49 PM
  • User1078145427 posted

    Hey virendra,

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

     

    Tuesday, January 6, 2009 8:12 AM
  • 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.

    Tuesday, January 27, 2009 2:13 AM
  • 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.

    Tuesday, February 23, 2010 5:56 AM
  • 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.

                            

    Tuesday, February 23, 2010 7:01 AM
  • 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>

    Tuesday, February 23, 2010 11:31 AM