Requirement: Mandatory field validation for SharePoint Rich text field in List form

Hurdles faced: Comparison of the value in the rich text field with an empty string in JavaScript returned FALSE even though there was no text in the rich text field

Approach:

  1. The RTE (Rich text editor) is rendered in the following way in browser
    As can be seen in the above snapshot, the DIV where the data is stored is the second child of the parent div. This is the scenario where no data is inserted in the field
  2. First thing that we tried is to fetch the inner text of this DIV element
    As can be seen, text() returns “” i.e. empty string
  3. Now, we try to compare this with empty string in JS 
  4. As the above returned false, we decide to check the inner HTML present in that DIV
    The inner HTML returned empty paragraph tag. If you observe, there is a space between ‘<’ and ‘/p’.We now try to compare this inner HTML with the empty paragraph tag:

    Even this did not return TRUE
  5. On double clicking the value returned in inner Text and HTML, a space was found to be inserted

  6. On digging deep, this space was found to be a Unicode character inserted by SharePoint viz. ZERO WIDTH SPACE
    “%E2%80%8B” is the value returned on encoding this space using JavaScript
  7. Thus, the conclusion is that we need to compare with this ZERO WIDTH SPACE
  8. One option is to compare the text() with “%E2%80%8B”; but, this will still return FALSE when the focus is on the Rich text field.
    In order cover both scenarios, Regex helps us to replace this Unicode character viz. ZERO WIDTH SPACE with normal empty string viz. “” 
    As can be seen, the Unicode character (\u200B) is used in the Regex for comparison and replaced with empty string
  9. We can compare the replaced value with an empty string to get TRUE as return value

    This is the required SOLUTION
Advertisements