Using JavaScript to validate a newsletter subscription

This guide explains how to use JavaScript to implement an age check for newsletter subscriptions. This validation ensures that only individuals aged 16 and over can subscribe to the newsletter.

Principle

If users have not yet reached the required minimum age, they will be able to complete and submit the form but they will not be able to subscribe to the newsletter. They will receive an error message if they try to submit the form with the newsletter subscription checked or attempt to navigate to the next page. This error message tells them that they have not yet reached the minimum age required for the newsletter subscription.

Main form elements

The JavaScript validation makes use of two main form elements:

  1. The input field for the date of birth (technical name: ‘birthday’). This field validates the date input in the format ‘dd.MM.yyyy’ and checks for a minimum age of 16 years.
  2. A single choice field for the newsletter subscription (technical name: ‘newsletter’) with ‘Yes’ as the option value to be checked. The validation result from the date of birth directly influences this single choice field: a newsletter subscription is possible only if the minimum age is reached. Otherwise, the form can only be submitted without a newsletter subscription.

Form elements required

The following form elements are required for the age check.

Input field for date of birth

  1. Technical name: birthday
  2. Date format: dd.MM.yyyy (important: select the format from the corresponding dropdown)
    Example: 01.03.2000 for 1 March 2000
  3. Function: The user enters their date of birth into this input field. The age is calculated automatically and checked to confirm that the person is at least 16 years old.

Single choice field for newsletter

  1. Technical name: newsletter
  2. Value to be checked: Yes
  3. Function: The user checks this field to confirm their newsletter subscription.

Inserting JavaScript code

To implement the age validation, enter the following JavaScript code into the validation text field in your form:

How to use the code

  1. Open the form page with the input field for the date of birth and the single choice field for the newsletter.
  2. Go to the Validation section.
  3. If necessary, move the Validation slider to the right to activate the function.
  4. Select the JavaScript option.
  5. In the validation script field, enter the code block for the validate() function inside the curly brackets.

What this code does

  1. The parseAge() function calculates the age based on the date of birth entered.
  2. The validation checks two conditions:
    1. Is the newsletter option ‘Yes’ selected?
    2. Is the calculated age less than 16 years?

Possible results

Case 1: Newsletter selected AND age <16
  1. Error message is shown
  2. Form cannot be submitted
Case 2: All other results
  1. No error message
  2. Form can be submitted normally

Testing the validation

After setting up the form, test the following scenarios to confirm that the form works as required:

  1. User aged 16 or above with newsletter subscription
  2. User aged under 16 with newsletter subscription
  3. User aged under 16 without newsletter subscription

Please use the feedback form to contact us if the form does not work as expected or if you have any other questions.

Feedback