Published on
ChronoForms uses the MooTools.Floor FormCheck library for client side validation. The library has many options and only a small sub-set is included in ChronoForms and there is no built-in way of setting other options.
However if you use my custom Show HTML [GH] action there is a tab where you can set custom FormCheck options.
You can get the custom action {rokbox text=|here| size=|1000,600| }http://greyhead.net/how-to-docs/cfv4-show-html-gh-action{/rokbox}.
This FAQ includes some examples of setting these options. You can find the full FormCheck documents here.
Highlighting inputs with errors
In the Show HTML [GH] action add this to the box on the FormCheck tab:
fieldErrorClass: 'validate_error',
display: {
showErrors: 1,
addClassErrorToField: 1,
indicateErrors: 2
},
Note that there is a separate group of display options - this is not always obvious from the FormCheck documents.
You may not need all these options: showErrors: 1 shows the errors on tabbing; indicateErrors: 2 lets you see more than one error at a time.
Then add this CSS to a Load CSS action in your form On Load event:
input.validate_error, select.validate_error {
border-left: 6px solid red;
}
input[type="checkbox"].validate_error + label, input[type="radio"].validate_error + label {
border-right: 6px solid red;
}
This shows errors with a red bar to the left of the inputs. You can change the CSS to suit your need but I tested with this version. Here's a screenshot of a form using this code - you wouldn't normally see all of these messages and red bars at the same time unless you submitted an empty form.
Comments: