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

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

In this article we explore enhanced/rich text box of SharePoint 2013 validation implementing using jQuery that facing “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 rich text box. The article describes the steps to remove this error.

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

Read some SharePoint jsom tutorials:

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 analysis these is visible in Chrome browser.

remove u 200b zero width space sharepoint rich text editor.png
remove u 200b zero width space sharepoint rich text editor.png



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:

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


Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →