Terms and conditions agreement validation

Showing and asking user to agree with terms and conditions is a common task, especially in registration forms.

This example collects two popular approaches and shows how to force visitors to agree with the terms of use.

It's recommended to use a basic math calculation captcha or Google reCaptcha in a registration form

Showing terms and conditions in the same form

In the form below, the terms of use is shown in the same form. It's easy for you to use the notEmpty validator in this case:

FormValidation.formValidation(document.getElementById('registrationForm'), {
    fields: {
        ...
        agree: {
            validators: {
                notEmpty: {
                    message: 'You must agree with the terms and conditions'
                }
            }
        }
    }
});

Showing terms and conditions in the same form

Showing terms and conditions in a modal

If the terms of use is too long and you want the user to pay more attention in reading it, it's great idea to place it in a modal. The modal consists of two buttons, one to indicate the agreement and the other to indicate the disagreement.

The implementation can be described as following:

Step 1: Create a hidden input to determine whether user agree with the terms or not

Initially, the field's value is set as no:

<input type="hidden" name="agree" value="no" />

Step 2: Define validation rules for the field

It's easy to check if user agree with the terms by checking the field value via the callback validator validator:

const fv = FormValidation.formValidation(document.getElementById('registrationForm'), {
    fields: {
        ...
        agree: {
            callback: {
                message: 'You must agree with the terms and conditions',
                callback: function(input) {
                    return input.value === 'yes';
                }
            }
        }
    }
});

Step 3: Handle the Agree and Disagree click event

When user click the Agree or Disagree button placed inside the modal, we need to set the hidden field's value to yes or no. Also, revalidate the field by using the revalidateField() method:

// Update the value of "agree" input when clicking the Agree/Disagree button
const agreeInput = demoForm.querySelector('[name="agree"]');
document.getElementById('agreeButton').addEventListener('click', function () {
    agreeInput.value = 'yes';
    fv.revalidateField('agree');
});

document.getElementById('disagreeButton').addEventListener('click', function () {
    agreeInput.value = 'no';
    fv.revalidateField('agree');
});

Below is the working example demonstrating all the implementation steps above. The terms are placed inside a Bootstrap modal.

Showing terms and conditions in a modal