Logo
PREGNANCY
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
 
 
Windows Server

Microsoft Content Management Server Development : Validating the HtmlPlaceholderControl (part 2) - Checking for an Empty HtmlPlaceholderControl

1/7/2013 3:30:16 PM

3.2 Checking for an Empty HtmlPlaceholderControl

Now that we know how to retrieve the current content of an HtmlPlaceholderControl, we can proceed to validate it. An HtmlPlaceholderControl is considered to be empty when one of the following conditions is met:

  • It contains an empty string.

  • It contains only invisible tags and spaces, like <p>&nbsp;</p>, or <p><div>&nbsp;</div></p> for example.

Depending on your requirements, you may also need to check to see if the placeholder content contains default text.

The JavaScript used to check for these conditions is covered in this section. The name of the control to be validated will be added to the name of the routine to ensure that if multiple validation controls have been placed on the same template file; they will each have their own client-side routines. The code makes use of the client-side isEmpty() method to check to see if the placeholder is empty.

There is a tiny glitch with the HtmlPlaceholderControl. When authors select all text and delete it (by pressing Ctrl + A followed by the Delete key), only visible content is removed. Instead of an empty placeholder control, what we may get is a control that has values such as: <P>&nbsp</P>, <div><font face=arial>&nbsp;</font></div>—and other combinations of tags without text. When HTML source editing is not allowed, these tags are not seen by authors. To weed out empty tags, we will implement the isEmpty() routine. This routine may look complex at first but it’s really quite simple.

The HTML stored in the placeholder could consist of tags that resemble one of the following:

TagsRemarksValid?
<img src="URLofMyPicture.gif"><hr>A single image or a horizontal ruleYes
<p><div>&nbsp;</div></p>Not an empty string but it also does not contain meaningful contentNo
<p><div>I love plants!</div></p>A mixture of text and tagsYes

To detect empty placeholders, let’s consider the first type of content—images and horizontal rules, which are defined by a single <img> or <hr> tag and do not require a closing tag. Placeholders storing such single-tagged elements are not empty placeholders. Our first task is to look for any of these tags within the content. As long as one of these tags exists, it’s not empty. For example, if the stored HTML is <p><img src="URLofMyPicture.gif"></p>, it’s not empty.

Once we have considered all visible tag elements, we look at all other tags. The only way to decide if the content is a mixture of text and tags or just a combination of meaningless tags is to remove all the tags and see what we have left. Here’s how we will do it: a regular expression matches the opening and closing angle brackets of an HTML tag and everything between and is used to effectively delete all remaining tags. Say the placeholder contains the following HTML:

<div><font face=arial>&nbsp;This Placeholder has Content&nbsp;</font></div>

The regular expression removes all tags, so the <div></div> and <font></font> tags will be stripped away. After it has done its job, we are left with only:

&nbsp;This Placeholder has Content&nbsp;

Finally, we remove spaces and non-breaking spaces (&nbsp;), which leaves us with the following string of text:

ThisPlaceholderhasContent

At the end of the process, if the placeholder still contains text, it means that it isn’t empty.

The complete JavaScript routine is shown below. Again, don’t worry about coding it. We will show you how it can be used in a custom validation control right after this.

<script language="javascript">
function validateHtmlPlaceholderControl1
{
  var content = document.all.NCPHRICH_HtmlPlaceholderDefinition1.HTML
  if (isEmpty(content))
  {
    // content is invalid
    return false;
  }
  else
  {
    // content is valid
    return true;
  }
}
function isEmpty(content)
{
  // Add more tags to ignore in this list if you need to.
  // Here, we ignore <hr> and <img> tags
  // Additional tags should be added and separated with a "|" character.
  var tagsToKeep = "img|hr";

  // This regular expression matches all <img> and <hr> tags
  var regExpTagsToKeep = "<\\s*(" + tagsToKeep + ")\\b[^>]*>";
  var reTagsToKeep = new RegExp(regExpTagsToKeep, "gim");

  // exit if one of the tags to keep is included.
  if (content.match(reTagsToKeep))
  {
      // Placeholder is not empty.
      return false;
  }

  // This regular expression gets all tags in the content
  var regExpForAllTags = "<[^>]*>";
  var reAllTags = new RegExp(regExpForAllTags,"gim");

  // Remove all tags by replacing with an empty string
  content = content.replace(reAllTags, "");

  // Remove all spaces and non-breaking spaces (&nbsp;)
  content = content.replace(" ","");
  content = content.replace("&nbsp;","");

  if (content == "")
  {
     // if after removing all tags, we are left with an empty string
     // Placeholder is empty.
     return true;
  }
  else
  {
     // if after removing all tags, we still have content.
     // Placeholder is not empty.
     return false;
  }
}
</script>

					  

Matching Tags with Regular Expressions

The isEmpty() JavaScript function we’ve just seen makes use of two regular expressions. The first checks the HTML for instances of <img> and <hr> tags. Recall that as long as the HTML contains these single tagged items, it’s not empty. Let’s take a closer look at the expression:

<[\s|/]*(img|hr)\b[^>]*>

The first and last characters, < and >, match the opening and closing angle brackets of all HTML tags.

After the opening angled bracket comes the escape sequence for a space or a forward slash, followed by an asterisk (the Kleene star), \s*. This ensures that tags with spaces after the opening angle bracket (such as < img>) and closing tags are included in the match.

The next part of the expression is a parenthesized list of the tags we’re looking for, (img|hr). We follow it with the boundary symbol, \b, which ensures tags that include “img” and “hr” in their names, like <funnyhrtag> or <strangeimgtag>, will not be included in the match.

Finally, the character class [^>]* matches all characters except the closing angle bracket. This means that it doesn’t matter what lies between <img (or <hr) and the closing angle bracket, >, so the tag can have any number of attributes, for instance <img border="0" name="img1"> or <hr width="100%">, and the expression will still match it.

The second regular expression, that matches all tags regardless of what lies between the angled brackets, is simpler, and you might be able to deduce how it does its work:

<[^>]*>

We have the opening and closing angle brackets, and between them the character class, [^>]*, which as before matches all characters except for the closing angle bracket.

Other -----------------
- Windows Server 2003 on HP ProLiant Servers : Migration Case Studies (part 3) - Hewlett-Packard Company
- Windows Server 2003 on HP ProLiant Servers : Migration Case Studies (part 2) - Eastman Chemical Company
- Windows Server 2003 on HP ProLiant Servers : Migration Case Studies (part 1) - County Government Office
- System Center Configuration Manager 2007 : Network Design - Troubleshooting Configuration Manager Network Issues (part 2) - Identifying Network Issues Affecting Configuration Manager
- System Center Configuration Manager 2007 : Network Design - Troubleshooting Configuration Manager Network Issues (part 1)
- System Center Configuration Manager 2007 : Network Design - Network Discovery
- Exchange Server 2007 : Deploying a Cluster Continuous Replication Mailbox Cluster (part 2)
- Exchange Server 2007 : Deploying a Cluster Continuous Replication Mailbox Cluster (part 1)
- Microsoft Dynamic AX 2009 : Report Customization (part 2) - Adding Promotional Materials to an Invoice Report
- Microsoft Dynamic AX 2009 : Report Customization (part 1) - Creating Promotional Materials
- Leveraging the SharePoint Workspace : Edit a List Item Using the Edit Form Offline, Create a New List Item Using the New Form Offline, Synchronize Offline Changes to SharePoint
- Leveraging the SharePoint Workspace : Leveraging the SharePoint Workspace, View Your List and Display Form Offline
- BizTalk Server 2009 Operations : Disaster Recovery (part 2)
- BizTalk Server 2009 Operations : Disaster Recovery (part 1) - Configuring the Destination System for Log Shipping
- Windows Server 2008 : Promoting a Domain Controller with dcpromo
- Windows Server 2008 : Retrieving Information About Objects with dsget, Viewing and Modifying AD Permissions with dsacls
- Microsoft Systems Management Server 2003 : NTFS Security
- Microsoft Systems Management Server 2003 : Standard and Advanced Security
- System Center Configuration Manager 2007 : Network Design - Use of BITS
- System Center Configuration Manager 2007 : Network Design - Fast Networks and Slow Networks
 
 
Most view of day
- Microsoft Exchange Server 2010 : Defining Email Addresses (part 1) - Accepted Domains
- Windows 7 Mobility Features : Other Mobile Features
- Configuring Startup and Troubleshooting Startup Issues : What's New with Windows Startup
- Microsoft OneNore 2010 : Housecleaning in OneNote - Opening a Backup Copy of a Notebook Section
- SQL server 2008 R2 : Setup and Breakdown of a Database Snapshot
- Microsoft Visio 2010 : Creating Web Pages from Visio Drawings (part 4) - Fine-tuning Web Pages and Battling Bugs - Saving a Visio Drawing as a Web Page
- Microsoft Lync Server 2013 : Deploying Lync Online - Configuring Lync-to-Phone, Creating a SIP URI Dial Plan
- Working with the User State Migration Tool (part 3) - Gathering Data by Running ScanState
- Microsoft Exchange Server 2010 : Getting Started with Email Archiving - Placing a Mailbox on Retention Hold, Litigation or Legal Hold
- Microsoft Exchange Server 2013 : Mailbox management - Discovery mailboxes - Creating additional discovery mailboxes
Top 10
- Windows Phone 8 : Configuring Mailbox Settings (part 5) - Configuring Automatic Replies
- Windows Phone 8 : Configuring Mailbox Settings (part 4) - Lightening the Display,Changing the Mailbox Sync Settings
- Windows Phone 8 : Configuring Mailbox Settings (part 3) - Message Signatures, Blind CCing Yourself
- Windows Phone 8 : Configuring Mailbox Settings (part 2) - Unlinking Mailboxes, Conversation View
- Windows Phone 8 : Configuring Mailbox Settings (part 1) - Linking Mailboxes
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 6) - Tracking installed roles, role services, and features
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 5) - Installing components at the prompt
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 4) - Managing server binaries
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 3) - Adding server roles and features
- Managing Windows Server 2012 Systems : Configuring Roles, Role Services, and Features (part 2) - Installing components with Server Manager - Viewing configured roles and role services
 
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro