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,
Sachchin AnnamPosted Sep 9, 2017, 4:15 PM
Nice one sagar, it will really help while customising list based forms.
Ibrahim ErsoyPosted Aug 23, 2017, 3:07 AM
Nice article! I came across to this a lot and deleted it regex way.While setting up order of scripts to be loaded in masterpage/page,I've realized If I load it before core.js the suitebar becomes non-responsive,disabled.Setting the script,after page load enables it though.Though,regex was searching for u200b entire <html> tag so that may be the case.