CSS for Marking Required Fields
It's convenient to include a visible symbol for required fields in the css, so you don't have to remember to put a * on the required fields. This also makes it possible to mark conditionally required fields appropriately.
Resolution
The following content should be placed in a Cascading Style Sheet or within a <style> tag. Note that the beginning of this css is only required to accommodate IE.
/* Displays an asterix to indicate what is required. But after attempting to submit display a red bar fo rany fields not completed. */ /*Start IE only - calls function to set add a span with a red asterisk in IE instead of using the ":before" pseudo class. The function setIE6PreRequired is required. */ .preRequiredLabel { _left: expression(setIE6PreRequired(this)); } .preRequiredLabel span { color: red !important; display: block !important; float: left; } .questionLabel span { color: blue; display: none; } /*End IE only*/ .preRequiredLabel_text { } .preRequiredLabel:before{ content: "* "; color: red !important; } .requiredField_text, .requiredField_textarea, .requiredField_select, .requiredField_radio, .requiredField_date { border-left: solid 4px red !important; } .requiredLabel_text, .requiredLabel_textarea, .requiredLabel_select, .requiredLabel_radio, .requiredLabel_date { color: #404142 !important; } /* End Required Fields */
The following content should be placed in a JavaScript file or within a <script> tag.
/* Start Required Fields */ // Inserts the red asterisk before required questions in IE. Other browsers us the psudo class of :before. IE must use this javascript and styling. // IE ONLY - used with the styles "preRequiredLabel", "preRequiredLabel span", and "questionLabel span" to seadd red asterisk in front of required questions. function setIE6PreRequired(obj) { var html = obj.innerHTML; if (html.indexOf("*")==-1) { html = "<span>*</span>"+html; obj.innerHTML = html; } }