How to Mark Fields as Required Using CSS
Including a visible symbol for required fields in CSS saves you from remembering to mark required fields manually. This also makes it possible to mark conditionally required fields.
To mark a field as required using CSS, place the script below either within a CSS file or a <style>
tag.
/* 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 */
Then place the JavaScript below in its own 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;
}
}
Updated 9 months ago