Red asterix for required fields.

Hey all,

Got to be a dumb question but what do i change here to make the asteriks red in chronoforms?

[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]

Thank you in advance for the pointers.

Hi Meget,

Please try

marker = ' <span style=\'color:red;\'>*'</span>;

Bob

Can you give it a second look?

Tried to replace the marker with this line and well doesn't simply work😟

Hi Meget,

You're right, it took a bit more work to get it fixed. I think that this is OK:[code]window.addEvent('domready', function() {
var required, cl, inputs, input, label, type, name, skip, marker;
marker = new Element('span', {
html: ' *',
styles: {
color: 'red',
fontWeight: 'bold'
}
});
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.grab(marker.clone(), 'bottom');
label.addClass('cf_required');
}
});
});[/code]
Bob

PS I've now added this to this FAQ

Brilliant! It works!🙂 You are a star. Finished me with the most annoying thing I could not resolve myself. Forever grateful!

And good that it's now in FAQ, I am sure quite a few folks would be happy to have this small but nifty thing on their website!🙂