I recently discovered a bug in SharePoint Designer Workflows whereby a "Choice" field that you denote as required (de-select the "Allow blank values" option in your SharePoint Designer Workflow form field options) is not exactly required on the form...as in, the validation is worthless. This blog post will attempt to help solve this issue for a couple of different options you may want to select or use when designing your Workflow Task forms in SharePoint Designer.

For starters, let me say that I have merely built a small amount of extra validation onto some existing information I found in the blogosphere. The original and still penultimate article on how to manipulate SharePoint form fields using JavaScript is by Rob Howard, and can be found here: http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx.  I also found some good information in this thread from the MSDN forums, which uses Rob's ideas to specifically validate a "Choice" field in a SharePoint Designer Workflow Task Form: http://social.msdn.microsoft.com/Forums/en-US/sharepointworkflow/thread/0ad7fc3c-97a1-464e-ae89-c3133462dda8/

The only problem I had with the information contained in the MSDN thread is that it is what I would call a little bit clunky in how it handles some of the validation, particularly the code that deals with Radio Buttons.

Sidebar: If you want to go all the way with Radio Button validation, check out this article by Markuso: http://blog.markuso.com/posts/9/using-javascript-to-access-a-list-form-field-in-sharepoint-designer/

OK, back on point. I wanted to come up with a way to implement validation within a form for multiple field types. As you would expect, since it is using JavaScript, I have run into many of the same issues that I mentioned as drawbacks to the code contained in the MSDN thread. Alas, it is one of the joys of JavaScript, especially on SharePoint. I have chosen to support the following validations in the first version...because that was the requirement I had for a client.

• Choice DropDown - validate whether or not the user has selected an option in the DropDown control
• Radio Buttons - validate whether or not the user has selected a radio button control 
• Single Checkbox for Approved/Rejected - validate whether or not the user has selected one and only one checkbox to approve or reject...this code is a little specific and very clunky, but also common enough that it just might be useful "as is"
• "Generic" Single CheckBox - validate whether the user has selected one and only one checkbox

Step 1:  JavaScript Coding

Here is the code that I came up with.  Once again, please be advised that it is a little bit clunky...but effective nonetheless.

function validateField(fieldName)
{
  var theForm = document.forms[0];
  for(var i=0; i < theForm.elements.length; i++)
  {
    if(theForm.elements[i].title == fieldName)
    {
      if(theForm.elements[i].value == "")
      {
        alert("You must select a value for " + fieldName + "!");
        return false;
      }
      return true;
    }
  }
}

function validateRadio(fieldName)
{
  var theForm=document.forms[0];
  for(var i=0; i < theForm.elements.length; i++)
  {
    if(theForm.elements[i].type == "radio")
    {
      if(theForm.elements[i].checked)
      {
        return true;
      }
    }
  }
  alert("You must choose a value for " + fieldName + "!");
  return false;
}

function validateApprovalCheckbox(fieldName)
{
  var theForm = document.forms[0];
  var approved = 0;
  var rejected = 0;
  for(var i=0; i < theForm.elements.length; i++)
  {
    if(theForm.elements[i].type == "checkbox")
    {
      if(theForm.elements[i].checked)
      {
        if(theForm.elements[i].parentElement.title == "Approved")
        {
          approved = 1;
        }
        if(theForm.elements[i].parentElelment.title == "Rejected")
        {
          rejected = 1;
        }
      }
    }
  }
  if(approved > 0)
  {
    if(rejected > 0)
    {
      alert("You must select only one value for " + fieldName + "!");
      return false;
    }
    return true;
  }
  if(rejected > 0)
  {
    return true;
  }
  alert("You must choose a value for " + fieldName + "!");
  return false;
}

function validateCheckboxSingle(fieldName)
{
  var theForm = document.forms[0];
  var checkedCount = 0;
  for(var i=0; i < theForm.elements.length; i++)
  {
    if(theForm.elements[i].type == "checkbox")
    {
      if(theForm.elements[i].checked)
      {
        checkedCount = checkedCount + 1;
      }
    }
  }
  if(checkedCount > 1)
  {
    alert("You must select only one value for " + fieldName + "!");
    return false;
  }
  if(checkedCount == 0)
  {
    alert("You must choose a value for " + fieldName + "!");
    return false;
  }
  return true;
}

OK, now that THAT unpleasantness is taken care of, how the heck do we use it?

Step 2:  Using the Code in SharePoint Designer

First, open your form in SharePoint Designer and find an asp.net tag near the top that looks like this:  <asp:content id="content2" runat="server" contentplaceholderid="PlaceHolderMain"> and put the JavaScript code RIGHT after that.

DO NOT FORGET TO ENCLOSE THE CODE IN A <script type="text/javascript" language="javascript"> tag!

Now, we just need to fire off one or more of those functions when we click our "Complete Task" button on our form. 

• Find the tag for the Complete Task button.  It should look something like this:  <input type="button" name="btnMarkSubmitted" value="Complete Task" onclick="javascript: {ddwrt:GenFireServerEvent...........
• Change the "onclick" code to incorporate a check for one or more of the validations.  Since all of the validation functions return "false" or "true", it is pretty easy. 
  • Make it look something like this for a single validation:  onclick="javascript: if(validateField('ManagerApproval')) {ddwrt:GenFireServerEvent.......
  • If you want to have multiple validations, try this:  onclick="javascript: if(validateField('ManagerApproval') && validateCheckBoxSingle('AssignedBusinessUnit')) {ddwrt:GenFireServerEvent.........

OK -- now for the extra long list of caveats for this "solution"...and the air quotes are no accident.  Make no mistake, this is a workaround if ever there was one.  And, like most workarounds of this type, there are certain things you will need to know before implementing it.  They are:

1. If you have to make a change to the workflow task form, as soon as you click the "Finish" button in the "Custom Task Wizard" dialog box, and then click the "Finish" button on the "Workflow Designer" dialog box, SharePoint Designer is going to recreate the form from the information it knows about from the Workflow Designer, which has nothing to do with any custom JavaScript code.  The best way to solve this one is to save your code off somewhere and re-paste it into the new form after you make a change.
2. Take a good look at the Radio Button validation code one more time...and you will see that it is going to give you a potentially false "true" validation result if it finds ANY radio buttons on the form that have been selected.  This is because within the radio button HTML code, you cannot get at anything that matches the fieldName variable to make sure you are checking the right thing.  If you don't believe me, set up a form with a Radio Button "Choice" field and do a "View Source" on it.  Anyway, what this means is that this code is truly only effective when there is only one radio button control on a form.
3. Similar to #2 above, the code that checks for a single selection in Checkboxes will yield problems if you have multiple checkbox controls on the form.  If you select one and only one checkbox for MULTIPLE fields, then you will end up getting a false "false" validation result.

Please feel free to expand upon this code and let me know what results you experience.