Forums

To show on a form a field is required I would like to add * next to those fields.

I checked the code, when a field is required, there is a class added to the input-element, but not to the label (to add a star).
I searched this forum, checked the faqs and the tutorials, but can not find how to do this. I must be overlooking something realy obvious.

How to show * next to labels of required fields?

Hi carsten888 ,

The simplest way is to type Name * in the element Label box. If you like you can do Name <span class='star'>*</span> (single quotes only I think) and format the star with CSS.

Bob

I don't want to have my administrators enter html for each element, so I came up with this code to do it all automatic 😀
(needs to re-render the form before this displays the stars, so open the wizard and save the form).

file: administrator/com_chronoforms/controller.php
line: 884

$formcontent_item_array['label'] = $formdata_element[$field_header.'_label_text'];

replace with

$temp_label = $formdata_element[$field_header.'_label_text'];
				if(isset($formdata_element[$field_header.'_validations'])){
					if(strpos($formdata_element[$field_header.'_validations'], 'equired') && !strpos($temp_label, 'span class="star"')){
						$temp_label = $temp_label.' <span class="star">*</span>';
					}
				}
				$formcontent_item_array['label'] = $temp_label;

Wow, that was not easy to find. Makes me think of my CCK (pages-and-items) which also pre-rendered each article.

I really hope you will integrate this in the core. And if so, make this optional in the configuration and make the * itself configurable, because some users will want to use an image instead of the *.

Thank you for a brilliant component.

Hi all,
I've got the same problem and tried the posted solution but it destroys all my tooltips by adding the * with the span class to it.
Ist there any other possibility to get the required fields marked in the frontend without editing every single label? Besides the solution of editing the name fields of the label is not very useful cause the * will appear in the tooltips too.
Why is that not a standard procedure in chronoform? I think it is very helpful for the user to mark the required fields with a * or something similar, don't you think?

Thanks in advance

Hi,

Here's an alternative approach using JavaScript to mark the required inputs. It's not ideal but doesn't require changes to the core code. Ad this script to a Load JS action in the On Load event of the form:[code]window.addEvent('domready', function() {
var required, cl, inputs, input, label, type, name, skip, marker ;
marker = ' *';
inputs = $$('div input, div select, div textarea');
required = [];
inputs.each(function(el) {
cl = el.getProperty('class');
if ( cl !== null && ( cl.contains("validate['required'") || cl.contains("validate['group[") ) ) {
required.push(el);
}
});
required.each( function(el){
el.addClass('cf_required');
skip = false;
type = el.getProperty('type');
if ( type == 'radio' || type == 'checkbox' ) {
if ( name != el.getProperty('name') ) {
label = el.getParent().getParent().getFirst('label');
name = el.getProperty('name');
} else {
skip = true;
}
} else {
label = el.getParent().getFirst('label');
}
if ( !skip ) {
label.appendText(marker);
label.addClass('cf_required');
}
});
});[/code]
It does two things: adds a marker - defined on the third line - to each label; and a class 'cf_required' to the labels and inputs so that you can use CSS to style them as a marker.

Not exhaustively tested so let me know what bugs you find. It seems to work on the standard ChronoForms layout but is dependent on the HTML structure to find the labels and may not work with all layout variants.

The image below is using this CSS

label.cf_required {
  color: red;
}
input.cf_required, select.cf_required, textarea.cf_required {
  border-left: 6px solid red;
}

Bob

Hi,

I've just posted an updated version of this code in this FAQ

Bob