Home > sharepoint > Custom SharePoint Edit Forms with Validation

Custom SharePoint Edit Forms with Validation

Recently I had to put extra validation on my edit form, for a list within SharePoint, and I couldn’t find one place that showed me how to do it.
I found multiple articles on how to do certain parts of creating a custom edit form, but I couldn’t find one article that put all the pieces together, thus I decided to blog my findings.

IMPORTANT NOTE: SharePoint edit/new forms dynaically create fields for themselves when new columns are added to the list. They do this with the use of a webpart called the ListFormWebpart. However, in order to make custom modifications to the edit/new form we are going to delete the ListFormWebpart and create custom HTML. Thus, after you do this the columns will not be dynamically added to the edit/new forms when the list is modified. Thus, please way the cost/benefits of using this technique.

  1.  First open your site in SharePoint designer and navigate to the list that you want to modify your edit and new forms.
    You will notice the list already has an Edit and New Form associated to it.
    Open up the form you wish to put the validation on. Eventually you should follow these steps for both the forms.
  2. Delete the ListFormWebpart that is already on the form.

    The ListFormWebpart dynamically creates the adding/editing of a form based on the items in the list, however it does not give you much in the way of modifications. So, unless you have specific requirements about customizing the edit or new forms (i.e.: custom validations), I would not recommend doing this.


     Note: some people told me in the comments they had trouble if they deleted this existing ListFormWebpart. There is a workaround if you have this issue – just hide the ListFormWebPart instead of deleting it. Thank you to Rajan for this response. Here is the workaround: Right click on the ListForm webpart in the sharepoint designer and click web part properties and then under layout, check the hidden check box

  3. Click Insert – SharePoint Controls – Custom List Form
    A Wizard will popup – choose the list this should be associated to and whether or not you are dealing with a new or add.
  4. Find the control you want to place the validation on, right click on it in the designer, and click Show Common Control Tasks
  5. Change the “Format As” dropdown from “List Form Field” to the type of control it should be (i.e. TextBox).

    The “List Form Field” can figure out the type based on the type in the SharePoint list it is bound to. However, you can’t do server side validations against it. Thus, we have to set it to a type of control we can have server side validations against.


  6. In the toolbox drag the server side validation you want on the form and set its properties. Note: to get the property for the “ControlToValidate” just copy the id from the control you are validation (that way you get the dynamically bound id) 

Thats it! You now have custom validation on your form.

Also, now you can modify the html of your edit/new form however you want. For example I have removed the SharePoint:SaveButton and replaced it with an asp.net button that calls some custom javascript and the javascript to do the save. I am mentioning this because now that you have complete control over the html in your edit/new forms you can completely modify it to meet whatever requirements you have.
Advertisements
Categories: sharepoint
  1. Lee
    January 28, 2008 at 4:21 pm

    Hi –

    I am trying to develop a Sharepoint site that several departments will be using. Each department should only have edit / view access to the fields they need (some are shared fields, some are unique to each department). Will this solution only show the users the fields they need to in their display / edit forms?

    Thanks, Lee

  2. Greg Galipeau
    January 28, 2008 at 4:38 pm

    Hello Lee,
    This solution is only for when you are building custom forms for the adding and editing of items. And then you want to put asp.net validation into those forms.

    Now, you can accomplish what you want with part of this solution. The reason is this solution is showing you how to create a “custom” form in SharePoint. This turns every field into it’s own asp.net control. You could place whatever code you want around those asp.net controls.

    If I was in your situation I would put a code behind file in my solution, then inherit your edit or view form from this code behind file. This will give you access to the .net controls on the form. Then you can use the SharePoint object model to show/hide controls based on the current user permissions.

  3. Dipten
    March 10, 2008 at 1:27 pm

    Hi,

    Deleting the ListFormWebpart that is already on the form is throwing an error message when the new button is clicked from the listview.
    The error message is “Invalid page URL:”

  4. Greg Galipeau
    March 10, 2008 at 1:33 pm

    Hello Dipten,
    I am not sure why this would be happening to you. I have done this procedure a bunch of times and never had that problem. Also, many other people have responded to me and said it has worked for them also.
    Anyways, what I am thinking here is you might have deleted something extra other than just the ListFormWebpart. When I delete this I go to the WISYWIG first and select it there to delete (instead of going right to the html). That ensures me that I am only deleting the ListFormWebpart. You might be doing this anyways, but that is the only suggestion I can give you.
    I hope you figure out your issue.

  5. Dipten
    March 10, 2008 at 3:24 pm

    Hi Greg,

    Thanks for your prompt response.
    I’m selecting the webpart from SharePoint Designer and deleting this but without luck!

    I tried this on a new list even – same error!

  6. Don
    April 18, 2008 at 3:46 pm

    Hello Lee. I was reading your posts regarding Edit Forms and wondered if you had seen the following issue.

    There is a major problem with the Employee Training Scheduling and Materials template. The template is designed to use several workflows, all very needed and impressive. The biggest problem I see with it that has not been answered by anyone, including Microsoft is the fact that user need Edit permissions on the “Courses” in order to successfully run the workflow for incremental Seating Policy adjustments. This is a great feature that automatically adjusts available seating when a user registers or un-registers for a course. Without this feature, I think the template is nowhere near as useful as it should be. The problems come in to play with the fact that once you give the users the “Edit” permission, they can also go in and edit every single course scheduled, including those very same Available Seats, along with Course Title, Comments, Location, etc. Hopefully most users are adult enough not to make these changes but some are invariably not that mature and / or some will mistakenly edit a course, believing they are registering or simply editing their own version of it. This is a huge bug in my opinion, particularly when Microsoft preaches so much about security and the importance of it. There should be a way to either run a workflow as another user and / or simply hide the Edit button on the form for users that should not have this permission. I have literally seen hundreds and hundreds of posts on this and nobody has the answer, including Microsoft posts, which is surprising to me. Any help would be extremely important and could allow most companies to us this potentially valuable tool fully.

  7. Greg Galipeau
    April 18, 2008 at 5:44 pm

    Hi Don,
    This is Greg (not Lee, he was just someone writing a comment on my blog :).
    Anyways, there are ways to do what you want to do. However, they are custom development tasks. The Employee Training Scheduling and Materials template is a Site Definition that Microsoft gives out, right? This is an important question – is it a Site Definition or a Template? I usually don’t use “canned” site definions, I usually build them from scratch. However, I do understand the importance of these “canned” site definitions to produce efficiency (i.e.: why re-invent the wheel).
    Anyways, if this is a Site Definition and they install it by pushing the features down to the 12 hive you have complete control over it.
    However, if it is not a site (or even if it is) you can do your customizations through features.

    So you asked two questions:
    1. Workflow from another user
    Answer: No, but you could create your own workflow and install that workflow to your SharePoint farm. Then you can associate your workflow to your list. However, the association of your workflow to your list is best done in Site Definitions. Otherwise, you have to manually do it on your SharePoint site after you deploy your Site. That is why I was asking the question earlier if you have the ability to modify their Site Definition.

    2. Hide the edit button
    Answer: Depends on what this edit button is. Remember, I told you I don’t use these templates because I feel I can create better ones than Microsoft :). These templates are not truely part of SharPoint, they are just custom templates or Site Definitions created like any SharePoint developer can do. Thus, hiding this “Edit” button can only be answered from someone who knows this template. But, I can take a guess and say that this “Edit” button is an “Action” on the list. Actions, on list items, are usually things that show up when you hit the dropdown of the item. You can cancel “Actions” if they are custom actions. You also can modify the buttons on the edit/new forms if you have access to the site definitions.

    In conclusion, the reason you are having trouble finding an answer to your question, on the internet, is because most people are explaining “custom” development of site definitions and features. You are using a “canned” template (which is hopefully a site definition) that Microsoft provided. These “canned” templates are great things for non-sharepoint developers to work with, but they are hard to modify.
    If I had this problem I would either:
    1. Try to find all the features used to build this template. Hopefully Microsoft gives these out and don’t just give you a WSP. If they do just give you a WSP, then this will be hard.
    2. Build a site definition from scratch, for my particular business need, and maybe use the template as a good starting point or business reference.

  8. Don
    April 18, 2008 at 7:30 pm

    Greg,

    I appreciate your feedback. It is a custom template from Microsoft and the Edit button is included within the form that is pulled up when you open the course to register or un-register. The form itself is not available within SharePoint Designer and I am guessing is being pulled from within a forms database somewhere on the Sharepoint server although, I do not know that for a fact. I do appreciate the fast reply and apologize if this was not the place to pose the question. Have a great day.

  9. Rajan
    July 29, 2008 at 12:48 pm

    Hi,

    Instead of deleting the ListForm Webpart, we can hide it. Right click on the ListForm webpart in the sharepoint designer and click web part properties and then under layout, check the hidden check box. Now you can enter new custom ListForm web part.

    I hope this helps.

    Raj

  10. xyz
    August 1, 2008 at 10:27 am

    Hello i am getting error in validation control in sharepoint designer.
    I am trying to validate Email field,with regular expression ,but its showing an error “Control ‘ff5’ referenced by the ControlToValidate property of ‘RegularExpressionValidator1’ cannot be validated. ”
    Please give me solution.

  11. Krishan
    November 3, 2008 at 8:06 am

    Thanx a lot Greg 🙂 I was planning to customize the NewForm.aspx and EditForm.aspx or make a new Webpart to replace LIstWebPart but your post showed an elegant way to accomplish that.

  12. Krishan
    November 5, 2008 at 1:30 am

    The problem that Dipten mentioned of “Invalid Page URL” is a known issue with customizing lists. There is a article on Microsoft Help and Support which can help:
    http://support.microsoft.com/Default.aspx?id=935504

  13. Patrick
    February 25, 2009 at 11:57 pm

    You mentionned in one of your replies that you could create a code behind file, put it in you solution, modify the Edit Form so that it inherits from it and then bingo, you have access to the aspnet controls on the form.

    Could you confirm this. I have the need to create a form that has
    a) relatively advanced functional behaviors, such has disabling part of the form when a certain condiftion is met, or setting default values for fields depending on prior fields input

    b) relatively advanced validations that are not supported out of the box by sharepoint, that i would like to execute server side.

    Two questions:

    Have you ever tried this using the standard ListFormWebPart as your form provider. We would love to be able to implement a solution that would not brake the dynamic nature of the LFWP

    What should your code behind class need to inherits from ? WebPartPage ?

    Thaks !

  14. Jagadeesh
    March 26, 2009 at 1:43 am

    Hi Thank you Very much for the post. I was exactly looking for this. Thanks Again.
    Great job.

  15. AD
    April 8, 2009 at 12:20 pm

    HI,
    When i change a control to display as TEXTBOX for example, the validation works great, but the value is not stored back in the Sharepoint Lists,
    Any Advice

    Thanks

  16. Jean-Michel
    April 15, 2009 at 1:23 am

    Thank you Greg, great post!

    I used your technique for a custom validation looking at 3 different lookup fields. I found out I couldn’t use the validation controls with a lookup field because the “Format As” dropdown (step 5 in your post) does not include the filed format Lookup.

    I decided then to write my own javascript validation function which is called by a new asp.net button as you suggested. The problem is that I don’t know the javascript I need to call/write to do the save. Can you help me out?

    Thanks

  17. Greg Galipeau
    April 15, 2009 at 2:35 am

    Hey Jean-Michel,
    Honestly, I wrote this so long ago I forgot how I replaced the Save button with javascript (and I don’t have that code anymore), so I had to do a little Googling to see if I could help you 🙂
    I ran across this post http://martijnmolegraaf.blogspot.com/2008/12/forms-submit-buttons-and-redirect-urls.html
    The blogger seemed to find the javascript to replace the submit button. Hopefully it helps you.

    • mc
      July 10, 2009 at 2:39 am

      Martijn Molegraaf’s blog is now unavailable. Given that his blog was largely republished bits of other websites, does anyone know if the information was available anywhere else?

  18. Ger Aben
    November 19, 2009 at 10:29 am

    How can I change the tab order in a customized EditForm in SharePoint Designer.

  19. December 31, 2009 at 6:41 pm

    Great blogpost, didn’t thought this would be so cool when I looked at the title with link!

  20. Sam Allgood
    March 9, 2010 at 6:43 pm

    Greg, thanks for posting this article, I found it very helpful in adding some validation in my newform. What I have found though is that once I implement this. the javascript link to Upload File does not work … I just get an Error on Page message on the footer bar. Do you know how to fix this?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: