Form V2 buttons

This topic will cover the submit buttons setup for form-v2 forms

structure

The form-v2 submit button only enables once the form is fully valid.

Setup:

base structure

Here's its based structure:

<a class="btn btn-submit disabled" data-disable="true">Submit</a>

captcha dependent structure

When a captcha is added to the form, the validation of the form enabling the submit button has to take into account the captcha validity. The enabling of the button only occurs if mandatory fields have been filled in correctly and if all fields that have been filled in are valid too. Since the recaptcha input validates from the recaptcha google service and not as a regular form input, we have to take it into account before flagging the form as valid and enabling the submit button.

That’s why the submit button needs a captcha dependent flag if its dependent on a captcha.

Here's a basic example structure:

    <a class="btn btn-submit disabled" data-captcha-dependent="true" data-disable="true">Submit</a>

Note that when multiple captcha inputs are added to a form(needed in several dynamic elements for instance), a common node parent will have to be target to indicate the submit button which captcha element is linked to it.

For instance here the data-captcha-form-parent attribute is targeting .dynamic-email

<div class="element-dynamic dynamic-email">
    <div class="captcha-container">
         <div class="g-recaptcha"></div>
    </div>
    <a class="btn btn-submit disabled" data-captcha-dependent="true" data-captcha-form-parent=".dynamic-email">
        submit
    </a>
</div>

Examples:

here