Validation on SharePoint Forms – Part Three

In parts one and two on this topic, I gave an overview of SharePoint form validation and gave an example of how you can implement some validation with JavaScript. In this post, I’ll show how you can use more standard .NET validation with a custom form.  (Be sure to check out Part 4 as well, which covers the PreSaveAction() function.)

Let’s use an example where you want to validate a US ZIP Code on your NewForm.aspx for a list.  The first steps are to create your list with whatever columns you want , including the ZIP Code column as a Sinlge line of text; copy NewForm.aspx (never edit the original in case you need it!); remove the default List Form Web Part (LFWP); and add your own Data View Web Part (DVWP).  Some folks out there will tell you that you should leave the default LFWP on the page and hide it to avoid problems; I think this is a holdover from SharePoint 2003 as I’ve never had any issues with removing it.  I’ll gloss over the details on these first steps, as I cover them in other posts.

Now that you have the DVWP on the page, you want to focus on the ZIP Code column.  Just a note: I always work in the Split View in SharePoint Designer so that I can watch what impact the changes I make using the dialogs have on the code within the page.  Highlight the ZIP Code, right click and choose Show Common Control Tasks *or* click the twiddle next to the formfield control.

You’ll see that the control is bound to your ZIP Code column and that it is formatted as a List Form Field.  Change this to a Text Box.  This will change the line in your page’s code which looks something like this:

<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="ZIP_x0020_Code" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@ZIP_x0020_Code')}" />

to something like this:

<asp:TextBox runat="server" id="ff4{$Pos}" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@ZIP_x0020_Code')}" />

So now you have a plain old asp:TextBox rather than a SharePoint:FormField, but the bindings are still the same.  Now add a RegularExpressionValidator to the page by choosing Insert / ASP.NET Controls / More ASP.NET Controls and selecting the RegularExpressionValidator in the Validation section of the Toolbox.

If the Tag Properties pane isn’t open, then right click on the validator and choose Properties to open it.  Now specify the required properties, something like the following:

• ErrorMessage: Please enter a valid ZIP Code in the format 99999-9999
• SetFocusOnError: True
• Validate Expression: Since we’re validating a ZIP Code, SharePoint Designer already knows about how it ought to be structured.  Simply click on the builder and choose U.S. ZIP code from the list, giving \d{5}(-\d{4})?
• ControlToValidate: This should be the ID of the ZIP Code Text Box control.  In this example, it is ff4_new.

If the user enters something for the ZIP Code with doesn’t pass the validation test (5 digits, followed optionally by a dash and 4 digits), they will see the error message, and the focus will be on the Zip Code column.