Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Server

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

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
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
 
 
25 Inspiring Game of Thrones Quotes
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
 
programming4us
Natural Miscarriage
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Game Trailer