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 fields – and therefore to the input that users make into the form – is handled in JavaScript using the technical name of the respective form field.
Formcentric provides you with the following additional JavaScript functions for handling date values and drop-down lists:
The JavaScript parseAge function converts the value of an input field into a JavaScript object of the Date type.
For this to work, you need an input field that is validated with the Date validator and expects a date as input from users.
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).
The JavaScript parseAge function calculates a person’s age based on their date of birth.
For this to work, you need an input field that is validated with the Date validator and expects the birthdate as input from users.
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).
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).
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.
Let’s assume that users can use your form to subscribe to a newsletter. In addition, you want to make sure that users are least 16 years old before taking out a subscription. If users are younger, then they can fill out the form and submit it, but they cannot subscribe to the newsletter. Instead, if they go to the next page in the form or want to submit the form, they are then shown an error message that tells them that they do not meet the minimum age requirement for the subscription.
In this case, we use JavaScript code that relates to two form fields.
The first form field referenced by the JavaScript is an input field where users enter their birthdate. The date of birth entered is validated here and a check is made to see whether the age criterion (16 years old) is met. The technical name of the input field is ‘birthday’ and the date format selected for the Date validator is ‘dd/MM/yyyy’.
The second form field referenced by the JavaScript is a single choice field for the newsletter subscription. The technical name of the single choice field is ‘newsletter’ and the value of the option that you need to check is ‘yes’. This means that the result of the birthdate validation has a direct relationship with this value. Users can only subscribe to the newsletter if they meet the minimum age requirement – otherwise they can only submit the form without subscribing.
