Xpages - Rich Text validation in CKEditor … losing content

Question

Platform : Domino v9

Background:

When an user opens a document using an Xpage, the Rich Text control (CKEditor)displays the existing content in that document.

The RichText field is bound to a backend Notes document.

When an user makes any changes to this content and clicks the Update button, validation occurs (for this example, we are checking to see if length exceeds 20 characters).

Validation is done using the ValidateExpression option.

On validation, user sees the error message but the new content entered by user is lost. The Rich Text control displays the original content.

Validation Code

<xp:this.validators>
<xp:validateExpression>
<xp:this.expression><![CDATA[#{javascript:var contentStr = value.getContentAsText();
var regex = /(<([^>]+)>)/ig ;
contentStr = contentStr.replace(regex,'');
if( contentStr.length < 20 ) {
  return true;
}else{
   return false;
}
}]]></xp:this.expression>
<xp:this.message><![CDATA[#{javascript:var errMsg  = getErrorMessageText   ('713','');
if ( errMsg != null && errMsg != "") {
//return errMsg;
return "Length cannot exceed 20 characters";
   }else{
return "Length cannot exceed 20 characters";
}}]]></xp:this.message>
</xp:validateExpression>
    </xp:this.validators>

Things I tried:

I tried the solution mentioned in Tommy Valand's blog but that did not solve the problem. Tommy's Blog

Question

How do I validate the RichText control without losing the new content ?

Screenshots:

enter image description here

Could you not add a CKEditor plugin to just limit the number of characters client side? I realize that does not answer the question but would seem to solve the problem stated. — MarkyRoden
Marky, Thank you for the suggestion. At this client site, it is mandated that we only do server side validation. Client side is not an option I can use. — Jack P
Works as designed. In JSF lifecycle failed validation prevents the submitted value to be stored in backend model. So in your case, use clientside validation, or make validation outside the RT component, so the validation prevents the save, but will allow to update the component with the submitted value. — Frantisek Kossuth
Jack - meh - in this case do both and I could argue that restricting the length of a field is not validation :) — MarkyRoden
Frantisek, Your suggestion to move the validation outside the field worked. Moved all validation checks to the Submit button and it worked. The question I have though is why did this affect only the Rich Text control ? On my page, I have other Text fields such as To, Cc, Bcc where users enter email addresses. In those fields, if user enters an Invalid address, the Error message is displayed at bottom and the incorrect Email is still displayed in the field. The field does not lose this new content. Why this difference in behavior between the Text and the Rich Text field ? Thanks. — Jack P

Tommy Valand Tommy Valand · Accepted Answer · 2015-05-19T19:04:06

When I have complex validation, I sometimes use a hidden input field for validation. Not sure if this will help in this situation, but could be worth a try..

getLocalValue should return the converted value in the validation phase. Since you're dealing with strings, getSubmittedValue might be even more appropriate/easier to use.

If you use xp:message, set the for attribute to whatever id you decide for the hidden field.

<xp:inputHidden id="dummyValidatorField" value="dummyValue">
<xp:this.validators>
    <xp:validateExpression>
        <xp:this.expression><![CDATA[#{javascript:var contentStr = getComponent( 'idOfRtField' ).getLocalValue(); // maybe you need to append .getContentAsText();
        var regex = /(<([^>]+)>)/ig ;
        contentStr = contentStr.replace(regex,'');
        if( contentStr.length < 20 ) {
          return true;
        }else{
           return false;
        }
        }]]></xp:this.expression>
        <xp:this.message><![CDATA[#{javascript:var errMsg  = getErrorMessageText   ('713','');
        if ( errMsg != null && errMsg != "") {
        //return errMsg;
        return "Length cannot exceed 20 characters";
           }else{
        return "Length cannot exceed 20 characters";
        }}]]></xp:this.message>
    </xp:validateExpression>
</xp:this.validators>