Using JavaScript to validate and link form elements
Validation with JavaScript lets you implement user-defined validation logic for your forms. Unlike the standard validation for individual form elements, this method permits the simultaneous checking of multiple items of input and their relationships to one another.
Usage examples:
Creating relationships between multiple form fields: For example, you can check whether the postcode a user has entered is correct for their town.
Performing calculations: Determine values automatically – such as a person’s age from their date of birth.
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.
You use the validate() function to define your own client-side checks in the browser.
Activating validation
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.
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.
Validation script for age check
What the validation does:
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.
Validation script
What the validation does:
If a value is entered into the town field, the postcode field must also be completed.
Conversely, the function also checks to confirm that a value is present in the town field if a postcode has been entered.
