Terms and conditions agreement validation
Showing terms and conditions in the same form
Showing terms and conditions 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
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
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.
The following validators might be useful to you.