Example Styles

Bootstrap Style

1. The Email field is integrated with other hosted fields on your page. The valid form requires an email and all hosted fields to be valid, enabling the submit button.
2. The CSS toggling class has been configured to make it compatible with the Bootstrap CSS framework.
3. When a valid email has been entered, the submit button will be active when they have left the email field. We can make the email field more reactive, by triggering form validation for every change on this field.

In the example demo, click Back to codes and capture the input event on the email field to make it happen.

Material Design Style

The Postal Code field is seamlessly integrated with other hosted fields on the partner’s page. The valid form requires Postal Code and all hosted fields to be valid, enabling the submit button.

The Postal Code field

• Postal code is valid with 2 or 5 digits, undetermined for empty or 1 digit.
• Unlike the above bootstrap example, we don’t need to leave the field to trigger the form’s validation (the Submit button is disabled immediately when the Postal Code become invalid).

The label’s colour

• is blue when user-focused on the field
• is grey when the field is completed and the user switches to another field
• is red when the field is invalid

To achieve this effect, we hooked to the onFocusStateChanged and onFieldValidityChanged then spot the label element with findLabelFor and toggle the corresponding css class on the label.

Minimal