Home > Work > Using #jQuery to attach regular expression validation to a #SharePoint list form field #SP2010 #PS2010 #ProjectServer #in

Using #jQuery to attach regular expression validation to a #SharePoint list form field #SP2010 #PS2010 #ProjectServer #in

On one of my current projects I have had cause to ensure that no special characters are in the Title field of a SharePoint 2010 list form.

This is because we are using the Title field as the Plan Name in a Project Create process in Project Server 2010.  As a result we need to ensure that the Event Handler we are creating has validated data that the PS2010 PSI Web Service can accept for the Plan Name.

I created the following script to validate the data being entered into the Title field of the list form as it is being entered.

I manipulate the Save Buttons in the ribbon and the list form to ensure that the user cannot enter invalid data into the form.

To ensure a good user experience, I add an extra <DIV> element next to the Title field to notify the user of what is going on.

Example Code:

1 <script type='type/javascript'> 2 3 _spBodyOnLoadFunctionNames.push("attachToTitleField"); 4 5 function attachToTitleField() { 6 var titleField = $('input[title=Title]'); //Find title field on the form 7 8 //Add a DIV element to provide a place for an error message from the RegEx validation 9 titleField.parent().append("<div id='GilesH_titleValidation'></div>"); 10 11 //Use jQuery to attach the validateAlphanumeric function on keyup 12 titleField.keyup(function() { 13 validateAlphanumeric(titleField.val()); 14 }); 15 } 16 17 function validateAlphanumeric(stringValue) { 18 19 //Allows alphanumeric only for the 1st character 20 //after the 2nd character, alphanumeric and spaces allowed upto 255 characters 21 var regExpressionValue = /^[0-9A-Za-z][0-9A-Za-z\s]{0,255}$/; 22 var re = new RegExp(regExpressionValue); 23 24 if (stringValue.match(re)) { 25 //alert("Successful match"); //Debug 26 27 //Allow Save 28 $('a[id=Ribbon.ListForm.Edit.Commit.Publish-Large]').attr("style", "display:inline-block;"); //Show Ribbon Save Button 29 $('input[id*=SaveItem]').attr("disabled",""); //Re-enable Form Save Button 30 31 //Blank Error Message 32 $('div[id*=GilesH_titleValidation]').text(""); //Blank custom error message 33 } else { 34 //alert("No match"); //Debug 35 36 //Stop Save 37 $('a[id*=Ribbon.ListForm.Edit.Commit.Publish-Large]').attr("style", "display:none;"); //Hide Ribbon Save Button 38 $('input[id*=SaveItem]').attr("disabled","true"); //Disable Form Save Button 39 40 //Provide Error Message 41 $('div[id*=GilesH_titleValidation]').text("The title you have entered is invalid. Only alphanumeric characters and spaces are allowed."); 42 } 43 } 44 45 </script> 46 47

  1. Durgashini
    September 20, 2011 at 07:26

    Hi can u pl stel me where did u plug in this code in ps 2010??

    • September 20, 2011 at 08:48

      Hi,

      On the newform / editform of the list add a content editor web part. You can then run the code inside that.

      I would place it at the below the form or use the $(document).ready / SP Onload Body Functions to ensure the page has loaded before you affect the DOM.

      Alternatively, create a feature that adds JavaScript to every page then run the code inside that.

      Kind Regards

      Giles

  2. August 22, 2012 at 12:05
  3. October 18, 2012 at 18:31

    thanks for this, I had to remove the line numbers from your code snippet using a reg exp:
    s/^..//g

  1. No trackbacks yet.

Leave a comment