JavaScript gives you a way to validate input for several form elements at the same time and create relationships between them. Since you can use all of the operations and functions offered by JavaScript, you can make things as simple or complex as necessary.
Access to the form elements – and therefore to the input that users make into the form – is handled in JavaScript using the technical name of the respective form element.
Validations with the validate() function
All forms permit the definition of a validation script on each form page. Forms include a prepared validation function for this purpose, with the name validate(). This function is executed automatically when users switch to a different form page or submit the form.
In the page properties, a Validation area is provided for you to store your validation scripts.
If necessary, move the Validation slider to the right to activate the function.
Select the JavaScript option.
In the validation script field, define your validate()function with the necessary validation logic.
Access to form data
JavaScript makes it easy to access the data in your forms:
Form elements: Each element can be accessed using its associated variable, namely its technical name. For example, the element named email can be accessed by using the email variable.
Current form page: The current form page is also accessed using its corresponding variable, namely its technical name. This lets you carry out page-specific checks.
Integrated JavaScript functions
Formcentric provides you with the following additional JavaScript functions for handling date values and drop-down lists:
parseDate
The JavaScript parseDate function converts the value of an input field into a JavaScript object of the Date type.
For this to work, you need either an input field that is validated with the Date validator or the 'Date' form element, where users can enter a date.
As the first parameter, enter the date format in JavaScript that you have specified for the input field with the Date validator (e. g. dd.MM.yyyy).
As the second parameter, enter the technical name that you have given the input field (e.g. ‘training’).
parseAge
The JavaScript parseAge function calculates a person’s age based on their date of birth.
For this to work, you need either an input field that is validated with the Date validator or the 'Date' form element, where users can enter the birthdate.
As the first parameter, enter the date format in JavaScript that you have specified for the input field with the Date validator (e.g. dd.MM.yyyy).
As the second parameter, enter the technical name that you have given the input field (e.g. birthday).
isEmptyList
The JavaScript isEmptyList function checks whether a selection was made from a form field in which users can make a selection, i.e. from a drop-down list or a single or multiple choice field.
To use the function, enter the technical name of the corresponding form field as the parameter (e.g. newsletter).
isSelected
The JavaScript isSelected function checks whether users have selected a specific option from a specified drop-down list or single/multiple choice field.
In JavaScript, enter the technical name of the form field with the selection as the first parameter (e.g. newsletter).
As the second parameter, enter the value of the option (e.g. 'Yes') that you want to check.
Practical examples
Example 1: Age restriction for a newsletter
With this JavaScript, you can check whether people subscribing to a newsletter are at least 16 years old. Set up the following form elements in the form.
Input field for date of birth
Label
Date of birth
Technical name
birthday
Validation
Date
Date format
dd.MM.yyyy
Single choice field for newsletter subscription
Label
Newsletter subsription
Technical name
newsletter
Options
Label: Subscribe to newsletter (value: Yes)
Label: Do not subscribe to newsletter (value: No)
On the form page, activate validation and select the ‘JavaScript’ option. Then execute the following validation script.
The age is calculated with the help of the parseAge() function. This function uses the specified format (dd/MM/yyyy) and the date of birth from the birthday field
The function checks whether the Yes option is selected in the newsletter field. If so, the function then checks whether the person is at least 16 years old.
If the person is not yet 16, the function returns an error message. This error message informs the user that the subscription is not permitted.
If no errors occur, the function returns an empty string.
Example 2: Postcode only with town
In this example, none of the JavaScript functions described above are actually used. Instead, a simple validation logic is used that merely checks the relationship between the postcode and town fields.
Input field for town
Label
Town
Technical name
town
Input field for postcode
Label
Postcode
Technical name
postcode
Validation
Postcode
On the form page, activate validation and select the ‘JavaScript’ option. Then execute the following validation script.
