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 -----------------
- jQuery 1.3 : Improving a basic form (part 3) - Required field messages
- jQuery 1.3 : Improving a basic form (part 1) - The legend
- jQuery 1.3 : Improving a basic form (part 1) - Progressively enhanced form styling
- 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
 
 
Most View
- Software Testing with Visual Studio Team System 2008 : Unit testing an ASP.NET application
- Service Management API (part 2) - Making API Requests
- SharePoint 2010 : The Client Object Model (part 3) - Writing the JavaScript WebPart
- Windows 8 : Applications - Launching an Application
- Windows Server 2012 : Backup and Recovery (part 3) - Backing up and recovering your data - Using the backup utility, Backing up your data
- Using XML in SQL Server 2008: Relational Data As XML - The FOR XML Modes (part 2) - Working with Binary Columns
- BizTalk Server 2009 : Using queues within asynchronous scenarios (part 2)
- An OLAP Requirements Example: CompSales International (part 16) - Security and Roles
- SharePoint 2010 : Change Sorting and Filtering of a List or Library
- Security Management in the Cloud - Access Control
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