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.

Tip

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:

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:

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:

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:

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

Related validators

The following validators might be useful to you.