How can I identify 'required' inputs?

Written Nov 28, 2012 05:14

It's very helpful to users to identify required inputs in some way or other. You can do this in ChronoForms by editing the input labels to add a *, or using a class to set the label. This FAQ uses JavaScript to identify the required inputs and add markers and classes when the page loads.

The code below needs to go into a Load JS action in the form On Load event:

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(label && !skip) {
      label.grab(marker.clone(), 'bottom');
      label.addClass('cf_required');
    }
  });
});

This example uses a bold, red asterisk * as the marker; you can change the marker and colour by editing the highlighted code in the snippet.

The code also adds a 'cf_required' class to the label and you can style this using CSS in a Lod CSS action in the form On Load event. Here's an example, which sets all the Label text red and adds a red bar at the left of any text, textarea or select inputs:

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

And here is the result - though you probably don't need all of this on the same form!

Using images

I have been able to add icons as flags using the CSS ::before and ::after pseudo elements. So, this CSS

label.cf_required:before {
  content: url(/images/asterisk_red.png);
  padding-right: 6px;
}

will add an image before the label text looking like this:

And this CSS

label.cf_required:after {
  content: url(/images/asterisk_red.png);
  padding-right: 6px;
}

will add an image before the label text looking like this:

Note that the images you use will need to be found and added to your site and you may need to adjust the layout of other Labels to suit, particularly if you use the images before the label text.

FAQs

Using images