FormFields for - New Open Source Project

transform and simplify your markup by allowing inclusion of form validation, uniform display, Linq-to-SQL integration and databinding with minimal effort forms are already simple, there are many tools such as DetailsView, ListView, etc. that can make our lives easier, but sometimes they just won't do. In those cases, we have to resort to writing repititous code for forms, that is what FormFields was developed for. Writing markup over and over for things such as validation, regular expressions, dropdownlist databinding, etc gets old really fast, so I developed a way to simplify it as much as possible.

Take for example a date entry field. You have your TextBox, then the CompareValidator to make sure it's a valid date, then a Mask to limit the user's input, a RequiredFieldValidator to make sure they enter something, a WaterMarkExtender to guide the user and finally a CalendarExtender to make input easier.

Now this is great stuff for a UI, and not too hard to write, but when you have to do more and more entry fields such as SSN, phone number, a dropdown, then a CheckBoxList; building forms can quickly become cumbersome and hard to understand, become incredibly tedious and turn into a ton of markup.

This is the markup required to do everything mentioned above:

<div class="form-field">
    <asp:RequiredFieldValidator ID="rfvSchoolDate" runat="server" ControlToValidate="txtSchoolDate" ErrorMessage="Required" CssClass="right validate" Display="Dynamic" />
    <asp:CompareValidator ID="cvSchoolDate" runat="server" ControlToValidate="txtSchoolDate" ErrorMessage="Invalid Date" CssClass="right validate" Display="Dynamic" Operator="DataTypeCheck" Type="Date" />
    School Date
  <asp:TextBox runat="server" ID="txtSchoolDate" CssClass="full" />
  <ajax:MaskedEditExtender ID="meeSchoolDate" runat="server" Mask="99/99/9999" MaskType="Date" TargetControlID="txtSchoolDate" />
  <ajax:calendarextender runat="server" id="calSchoolDate" TargetControlID="txtSchoolDate" Format="MM/dd/yyyy" PopupPosition="TopLeft" />
  <ajax:TextBoxWatermarkExtender ID="tweSchoolDate" runat="server" TargetControlID="txtSchoolDate" WatermarkCssClass="light full" WatermarkText="mm/dd/yyyy" />

All of that can be replaced with just this:

<formField:textBox ID="tb_SchoolDate" runat="server" Type="Date" Required="True" Title="School Date" />

Yes, it is just that easy. The payout and styling is all inherited from a single class and is easy to customize while making for uniform displays. There are multiple different presets for it including SocialSecurityNumber, Date, ZipCode, and a ton more.

This is not only for TextBox fields, it also works for CheckBox, DropDownList, ListBox, CheckBoxList and RadioButtonList. And it not only formats everything the same and takes care of validation (anything that is not automated can be easily added) but it also takes care of databinding as well. Instead of making a datasource, adding an initial entry, binding it to the data and adding a RequiredFieldValidator, you can simply do this:

<formField:dropDownList ID="ddl" runat="server" Title="Category" L2STableName="categories" Required="True" />

No DataSource needed, it is all taken care of within the control itself (this is using Linq-to-SQL and the defaults).

documentation and download

I just wanted to give a quick overview of what it does, I have it fully documented and have more examples here: and it is available for download from CodePlex. I hope some people get some use out of this and I would love if people would want to jump in and add new features.

stuff I still want it to do

It does not render in the designer, and you can't put them into the toolbox - I do not know how to do this just yet, I would love for someone to jump in and help out on this one!

I am taking a much needed 30 day vacation, so no new posts/updates will be happening for a while, but I will be right back to advancing this project when I get back.

Shout it kick it on

Comments (6) -

  • Wow! Thank you! This is going to be insanely useful!
  • To add them to the tool box, right click on the toolbox.  Click Add Tab, give it a name.  Within that tab right click again and click choose items.  Browse to the .dll and hit ok.  Thats usually how I do it to get the ajaxtoolkit tools in the toolbox.
  • Thanks, but I know how to add stuff to the Toolbox, but the way I made them they don't work in the Toolbox or render in the designer (I just use markup now) - I need to figure out how to make them work with the toolbox.
  • This is great! I do a fair amount of ASP.NET development at my job and I'm very interested in helping this project along in my spare time. I'll get the source sometime this week and see what I can do to help things along.
  • I really appreciate the example that you have cited on this post together with the codes. Thanks a lot for sharing the code snippets. I will definitely try this out myself.
  • i was looking for this code. thanx
Comments are closed