Remove InfoPath Validation Red Dashed border

Question

I created a custom form using InfoPath 2010. I need to input validate all fields (approx: 70). The customer is adamant on not seeing the dashed border around required radio and checkbox elements, etc. The customer wants a required asterisk outside the field next to the text instead. Can I remove them or change the color to something subtle? I hide the submit until the proper fields are valid. I have tried extracting and repacking using Makecab and placed CSS for input fields. It is overridden in the cascade by .dk_ [generated]. Thanks!

Answer 1

I have never had success exporting the files and importing or adjusting the CSS so this is what I do.

I make all the fields not required, eliminating the red dashed border and put an asterisk by the required fields.

Then I create rules to disable a custom save/submit button until all the required fields are not blank.

Answer 2

I found a way to accomplish this to the satisfaction of my customer. The response above from PirateEric is quite valid and preferred in most occasions but I thought it worthy to share this somewhat lengthy method. Perhaps somebody may choose to elaborate or improve on this solution.

First, create a webpage from master.

• Run SharePoint Designer.
• Select File > Open Site and select the site in which you want the new page created.
• Select File > Double click New Page From Master and choose your masterpage
• Click Create (You can change your masterpage declaration in the Markup if needed)
• Enter the name of your page and choose the location
• Save the page to the Site Pages directory and name it. I will name this one FormNameEmbed.aspx
• Allow it to open in Advanced mode
• Next, select the little arrow to the right of the PlaceHolderMain area in design view and choose Create Custom Content

Embed the Form

• Place your cursor in the PlaceHolderMain region
• Click Insert on the toolbar > Web Part Zone. Add a Web Part Zone to the PlaceHolderMain placeholder
• Now, add a web part by making sure your cursor is in the web part zone div and clicking WebPart.
• Find the InfoPath Form Web Part and insert
• In the design view (I operate in Split view) double click the web part where is says "No Preview Available"
• The Web Part dialog appears. Choose the List or Library the InfoPath 2010 Form is associated with.
• If it is a simple content type, it will just say Form.
• Leave remaining properties alone for now and click OK.
• View the page in the browser. The form should appear.

I have 2 radio button selections fields on my form and the option properties are set to "cannot be blank" so I see a red dashed border until something is selected.

Analyze Styles with Firebug

• Open your page with the Firefox browser and lets analyze styles with Firebug. (Firebug add-on for Firefox)
• With Firebug open, click the small rectangle with arrow icon next to the bug icon (This is the element inspector)
• Now, hover over the radio button field with the red dashed border until you have selected the area and click.
• This shows the class of the element. In this case, the class is .dl_qL2dDlKPfhWD0iX3_0. In Interenet explorer it will render as .df (you can check in IE using F12 and performing very much the same activity)
• Copy this style name.

Create Stylesheet

Using Notepad or some other appropriate editor, create a style.css file. Mine is called override.css. I added the following:

.dl_qL2dDlKPfhWD0iX3_0 {
 border:0 !important;
 outline: 0 !important;
 }
.df_qL2dDlKPfhWD0iX3_0 {
 border:0 !important;
 outline: 0 !important;
 } 

The first is for Firefox and the second for IE.

Add a stylesheet to the Style Library or Site Assets Library

• Go to the Style Library or Site Assets Library within your site and click Add item
• Browse to your css file and upload it

Add the CSS declaration to the page using SharePoint Designer

• Switch back to SharePoint Designer 2010

• In the Markup view of the FormNameEmbed.aspx page, place the following tag as the first line inside PlaceHolderMain right above the existing Form Web Part

  <SharePoint:CssRegistration ID="CssRegistration1" Name="//websitename/site/SiteAssets/override.css" runat="server" After="corev4.css" />
  

This tag will render the css after the core style.

Notes:

• It is generally not preferred practice to use !important; however, this is the correct usage when an absolute is required and since Microsoft are using it in SharePoint, it is acceptable.
• If you make edits to the form and upload it over the existing form, the class names listed above in the style will regenerate thereby changing name and your stylesheet will need to be edited and uploaded again
• Other form elements may not act the same; each may have a different class.

Addendum: Red asterisk removal

The code above works for the red dashed border which is tricky. To also remove the red asterisk from text fields, add one more class to your override stylesheet

.asteriskIcon {
 display:none;
 visibility:hidden;
}

The asterisk is actually part of a sprite image that appears on a z-index layer and it can be hidden by adding the class above.

To make this a proper solution, make sure to hide other methods of getting to the base form and provide an easy to find link to the Form Page rather than the direct form. I hope this helps somebody.