Column validations is in SharePoint 2010 a feature for lists, this is great when you need to validate a column like compare if a number is between some interval or if an end date is later than a start date.

Regular expression is not available out of the box as a feature in SharePoint 2010 column validation so how can we do this? If it´s about a smaller implementation like just one list form then jQuery would be the alternative. What about the third-party market? Take a look at Bamboos product called Bamboo validate column. If you need regular expression as an inbuilt feature in all lists in you environment, this product is definitely something to looking into.

How to use regular expression for validation with jQuery then? Let´s first take a look at the jQuery plugin called jQuery.Validate and how we can use this in SharePoint. This plugin offers a lot of options for customizations. JQuery validate has been around since early 2006 and is written by Jörn Zaefferer, lead developer of the jQuery UI team and it.

In following steps we will link our friend the Content Editor Web Part (CEWP) to a jQuery script stored in a document library at the same site. This apporach could be done by refering the master page, the page layout or as a packed web part if you prefer to.

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript"> 
$(document).ready(function() { 

$("#aspnetForm").validate({ 
submitHandler: function(form) { 
}}); 

$.validator.addMethod(
      "regex",
      function(value, element, regexp) {
          var check = false;
          var re = new RegExp(regexp);
          return this.optional(element) || re.test(value);
      },""
);

// VALIDATE TITLE
$("input[title='Title']").rules("add",{ 
 required: true,
 regex:"^[A-Za-z0-9- _]{1,100}$",
 messages: { 
 regex: "<br />One or more special charachters.." 
}
});

// BLUR -  Set focus after alert
$("input[title='Title']").blur(function() { 
if (!$("input[title='Title']").valid()) { 
this.focus(); 
} 
}); 

// SAVE - Cannot save if regex rules adds
$("input[value='Save']").focus(function(){ 
if (!$("input[title='Title']").valid()) { 
alert("You cannot save this Item.."); 
$("input[title='Title']").focus(); 
} 
});

}); 
</script> 

Let’s start:

  1. Copy the script above and save it to a text file (.TXT)
  2. Add this text file to Share Documents in the same site as the list. You can create a new document library if you like to this script separate. Copy the shortcut to this file.
  3. Create a custom list named Validate
  4. Create a column named Email with the type ‘single line of text’
  5. Go to the Validate Lists New Form page. Click the List tab in the ribbon and select Default New Form.
  6. Click Add a Web Part. Select Media and Content to the left and select Content Editor. Click Add.
  7. Click at the arrow to the right of the web part and select Edit Web Part. Paste or type the link to the text file you uploaded in step 2. Set the link to be relative like, e.g. /RegEx/Shared%20Documents/ValidateWebPart.txt
  8. Type a title in the Content Editor Web Part and select ‘none’ for the chrome type to and set the web part to be hidden. Click OK.

More things you can do

This example refers to latest jQuery, if you already call the jQuery from the master page make sure to not call it twice. If you are going to set this in production, make sure to use the same approach for the edit form page.

You can do a lot more with this plugin; let´s try to use some other validation methods like URL and Email validation. If you followed this example you created the column named Email, let´s validate this column so we can be sure that the user type a valid Email address here.

Just add this section in the same pattern as the script above. Paste this between validate title section and the blur section. You can add Email to the blur and save as well.

// VALIDATE EMAIL
$("input[title='Email']").rules("add",{ 
 email:true,
 messages: { 
 email: "<br />Not a valid Email address.." 
}
});

Check out this page for more information about validation and regular expression

About the validation plugin
http://docs.jquery.com/Plugins/Validation
Bamboo column validator
http://store.bamboosolutions.com/pc-149-1-bamboo-validator-column.aspx
8 Regular Expression you should know
http://net.tutsplus.com/tutorials/other/8-regular-expressions-you-should-know/

Advertisements