Validation customization in CFv5

This FAQ descibes ways of customising validation messages and validation methods in CFv5.

Custom messages

In CFv5 you can customize or translate your validation message in two ways:

In a single form element

Add the message string to the 'Title' box in the element settings, this will display the new message instead of the default one.

For a whole form

In the form Designer tab drag in a Load JavaScript action, move it up before the HTML (Render form) action and use JavaScript similar to this example:

jQuery.gvalidation.errors.required = "test required custom message"; 
jQuery.gvalidation.errors.email = "test email message"

Changing the language

Normally the default error message language will be set from the current site language. The language files are in the /libraries/cegcore/assets/gplugins/gvalidation/lang folder, you can add a new language by making a renamed copy of  one of these files. You can also edit the existing files but note that those changes may be over-written if you later upgrade ChronoForms.

You can over-ride the automatic language selection in the Form Editor Validation tab.

Add a custom validation function

At the bottom of the Validation tab in most elements is a Custom Function box. You can add the name of a JavaScript function here to create a custom validation.

Add the JavaScript function in a Load JavaScript action in the form On Load event. The function will be passed the object of the element being validated and returns true or false. For example this code checks for a string with eight digits and a letter like 12345678a

function nif(el) {
  var string, regex;
  string= jQuery(el).val();
  regex = new RegExp("^[0-9]{8}[A-z]{1}$");
  if ( regex.test(string) ) {
    return true;
  } else {
    return false;
  }
}

Note that this does not set a custom error message; you can add one using the Title box in the element settings.

Run JavaScript when validation succeeds or fails

This is useful if you want to take some action when the form is submitted and after the validation process has completed.

Open the HTML (Render form) action settings and add either or both of these function calls to the Form tag attachment box (you may use different function names instead of onSuccess and onFail):

data-gvalidate_success='onSuccess' data-gvalidate_fail='onFail'

Drag a Load JavaScript action into the On Load event and move it up before the HTML (Render form) action.

Define the onSuccess and/or onFail functions. These take two parameters, the 'event', and the 'form' object. For example:

function onSuccess(event, form){ 
  alert("Thanks!");
}