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> </p>, or <p><div> </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> </P>, <div><font face=arial> </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:
| Tags | Remarks | Valid? |
|---|
| <img src="URLofMyPicture.gif"><hr> | A single image or a horizontal rule | Yes |
| <p><div> </div></p> | Not an empty string but it also does not contain meaningful content | No |
| <p><div>I love plants!</div></p> | A mixture of text and tags | Yes |
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> This Placeholder has Content </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:
This Placeholder has Content
Finally, we remove spaces and non-breaking spaces ( ), 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 ( )
content = content.replace(" ","");
content = content.replace(" ","");
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:
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.
