Remember me

Forms - Required "*" formatting

6 years 8 months ago #1

  • Scott's Avatar
  • Scott
  • Posts: 8
I just purchased this forms extension and have come across a limitation in the formatting. I would like to have the Required "*" have the ability to be styled separately from the Label itself. I am converting forms from another form component that allowed this and defaulted to a RED asterisk, so that it was really obvious that a field is required. Since this particular client was having issues with the other component allowing forms to be submitted even though they were missing fields that were supposed to be required, we are changing the component out, but this is important to them.

I have worked around this for the time being with some javascript/jquery to locate the * in thje <span> tag and add an additional <span class="reqColor"></span> around it. But this is not the best solution in my opinion.

Can you tell me if there is some way to already do this or add it to a feature request?

6 years 8 months ago #2

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

You need at the custom JS file of your template add code:
jQuery(document).on('ready', function(){
	jQuery('.com-baforms .tool > label span').each(function(){
		var text = this.textContent.trim().split(' ');
		if (text[text.length - 1] == '*') {
    		delete(text[text.length - 1]);
			text = text.join(' ');
			text += '<span class="star">*</span>';
            this.innerHTML = text;
		}
	})
})

and at the custom CSS file of your template add code:
span.star {
	color:red !important;
}

Regards,
Vyacheslav, Balbooa.com
Powered by Kunena Forum