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;
}
}