Remove U+200B (Zero-Width Space) In RichTextHTML Field SharePoint

Introduction

In this article, we will explore how to resolve the error that arrives while implementing the validation to enhanced/rich text box of SharePoint 2013 using jQuery. We will call this error the “Zero-width space” issue.

I observed that the mandatory enhanced/rich text box of SharePoint 2013 doesn’t throw an error when we cut the content from it from the edit/new form and it allows us to save the form without any content in the rich text box. The article describes the steps to remove this error.



The Rich text editor in Sharepoint 2013 inserts “zero width spacing” characters when editing HTML. Unfortunately, these are not visible to the normal user and so is difficult to remove, so much for WYSIWYG! I analyzed that these are visible in Chrome browser.



Solution

Need to avoid the div tags and get data alone from multiline textbox field using the following steps.

Step 1

Navigate to your SharePoint 2013 site.

Step 2

From this page, select the Site Actions | Edit Page.

Go to the "Insert" tab in the ribbon and click the "Web Part" option. In the "Web Parts" picker area, go to the "Media and Content" category, select the "Script Editor" Web Part, and press the "Add button".

Step 3

Once the Web Part is inserted into the page, you will see an "EDIT SNIPPET" link; click it. You can insert the HTML and/or JavaScript as in the following,

<script type="text/javascript" src="/Script/jquery-1.10.2.js"></script>
<script type="text/javascript">
    var oLoader;
    var attcount = 0;
    var arraycount = 0;
    $(document).ready(function() {
        $('h3.ms-standardheader:contains("Employee Account  Number")').append('<span class="ms-accentText" title="This is a required field."> *</span>');
    });

    function PreSaveAction() {
        var EmpAcctNum = $("td.ms-formlabel h3.ms-standardheader nobr:contains('Employee Account  Number')").parent().parent().parent().find("div.ms-inputBox div.ms-rtestate-write").text();
        var EmpAcctNum_validatiomsg = "<span id='EmpAcctNum' class='ms-formvalidation ms-csrformvalidation'>You can't leave this blank.<br></span>";
        EmpAcctNum = EmpAcctNum.replace(/[\u200B-\u200D\uFEFF]/g, '');
        if (IMPONuM.trim() == "") {
            $("#EmpAcctNum").remove();
            $("td.ms-formlabel h3.ms-standardheader nobr:contains('Employee Account  Number')").parent().parent().parent().find("div.ms-inputBox div.ms-rtestate-write").closest("span").after(EmpAcctNum_validatiomsg);
            return false;
        } else {
            $("#EmpAcctNum").remove();
            return true;
        }
    }
</script>

Output

Before,

After,