Programming4us
         
 
 
Programming

jQuery 1.3 : Improving a basic form (part 4)

12/6/2010 5:47:47 PM
A regular expression digression

The regular expression is contained within the two forward slashes, and looks like this: /^\((.+)\)$/. The first character, ^, indicates that what follows needs to appear at the beginning of the string. It's followed by two characters, \(, which look for an opening parenthesis. The back-slash escapes the character that follows, telling the regular-expression parser to treat it literally. This is necessary because parentheses are among the characters that have special meaning in regular expressions, as we'll see next. The next four characters, (.+), look for one or more (represented by +) characters of any kind within the same line (represented by.) and put them in a group by use of the parentheses. The final three characters, \)$, look for a closing parenthesis at the end of the string. So, all together the regular expression is selecting an opening parenthesis, followed by a group of characters, and ending with a closing parenthesis.

The .replace() method looks within a particular context for a string represented by a regular expression and replaces it with another string. The syntax looks like this:

'context'.replace(/regular-expression/, 'replacement')

The context strings of our two .replace() methods are the variables requiredKey and conditionalKey. We've already looked at the regular expression part of this, contained within the two slashes. A comma separates the regular expression and the replacement string, which in our two cases is'$1'. The $1 placeholder represents the first group in the regular expression. Since, again, our regular expression has one group of one or more characters, with a parenthesis on either side, the replacement string will be everything inside, and not including, the parentheses.

Inserting the field-message legend

Now that we've retrieved the field messages without the parentheses, we can insert them, along with their corresponding flags, above the form:

$(document).ready(function() {
var requiredFlag = ' * ';
var conditionalFlag = ' ** ';
var requiredKey = $('input.required:first')
.next('span').text();
var conditionalKey = $('input.conditional:first')
.next('span').text();
requiredKey = requiredFlag +
requiredKey.replace(/^\((.+)\)$/,'$1');
conditionalKey = conditionalFlag +
conditionalKey.replace(/^\((.+)\)$/,'$1');
$('<p></p>')
.addClass('field-keys')
.append(requiredKey + '<br />')
.append(conditionalKey)
.insertBefore('#contact');

});

The five new lines should look relatively familiar by now. Here is what they do:

  1. 1. Create a new paragraph element.

  2. 2. Give the paragraph a class of field-keys.

  3. 3. Append requiredKey and a line break to the paragraph.

  4. 4. Append conditionalKey to the paragraph.

  5. 5. Insert the paragraph and everything we've appended inside it before the contact form.

When using .append() with an HTML string, as we do here, we need to be careful that any special HTML characters are properly escaped. In this case, the .text() method we used when declaring the variables has done this for us.

When we define some styles for .field-keys in the stylesheet, the result looks like this:

Our jQuery work for the first fieldset is almost complete.

Other -----------------
- Changes to Privacy Risk Management and Compliance in Relation to Cloud Computing
- Cloud Security and Privacy : What Are the Key Privacy Concerns in the Cloud?
- Cloud Security and Privacy : What Is the Data Life Cycle?
- Making Your Site Accessible to Search Engines
- Security Management in the Cloud - Security Vulnerability, Patch, and Configuration Management (part 2)
- Security Management in the Cloud - Security Vulnerability, Patch, and Configuration Management (part 1)
- Security Management in the Cloud - Access Control
- Security Management in the Cloud - IaaS Availability Management
- Security Management in the Cloud - PaaS Availability Management
- Security Management in the Cloud - SaaS Availability Management
- Security Management in the Cloud - Availability Management
- Security Management in the Cloud
- The Art of SEO : Trending, Seasonality, and Seasonal Fluctuations in Keyword Demand
- The Art of SEO : Leveraging the Long Tail of Keyword Demand
- The Art of SEO : Determining Keyword Value/Potential ROI
- Identity and Access Management : Cloud Service Provider IAM Practice
- Identity and Access Management : Cloud Authorization Management
- Identity and Access Management : IAM Practices in the Cloud (part 2) - Federated Identity
- Identity and Access Management : IAM Practices in the Cloud (part 1) - Cloud Identity Administration
- iPad SDK : Keyboard Extensions and Replacements (part 4) - Creating the Calculator
 
 
Most View
- BizTalk Server 2009 : Using asynchronous services in WCF (part 1) - Creating the synchronous service
- Windows Home Server 2011 : Setting Up a Fax Server (part 3) - Receiving Faxes
- Windows Phone 7 : Synching with Your PC - Touring the Zune Software
- Visual Basic 2010 : Deploying Applications with ClickOnce - Security Considerations, Programmatically Accessing ClickOnce
- SQL Server 2008 Analysis Services : Understanding SSAS and OLAP
- Programming with SQL Azure : Connecting to SQL Azure (part 2)
- Windows 8 : Applications - Launching an Application
- Windows Phone 7 : Getting Directions
- Understanding Service Broker Constructs (part 2) - Creating Queues for Message Storage
- Windows Phone 7 : Managing Mail Folders
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS