This section will teach you how to validate user inputs into fields in real time on an order form.

Fields

Valid Style/Class

Valid style is the default style/class of the field

Invalid Style

Use the attribute data-lp-invalid-style

<input data-lp-invalid-style="color: red" data-lp-type="first_name"/>

Invalid Class

Use the attribute data-lp-invalid-class

<input data-lp-invalid-class="invalid_field" data-lp-type="first_name"/>

Custom Notification Alert

A notification Element in the field level can be defined

Create element initialized with style=”display:none” and set the attribute data-lp-notification-element with the id of the relevant notification element

<div id="first_name_notification" class="notification" style="display:none"></div>

<input data-lp-invalid-class="invalid_field" data-lp-type="first_name" data-lp-notification-element=”first_name_notification”/>

Secured Hosted Fields

Valid Style

The secure hosted fields are iframes that the payment gateway inject inside the div. In order to set the valid style the attribute data-lp-valid-style should be set with the proper style

Valid Class

The secure hosted fields are iframes that the payment gateway inject inside the div. In order to set the valid class the attribute data-lp-valid-class should be set with the proper class

Invalid Style

Use the attribute data-lp-invalid-style

<input data-lp-invalid-style="color: red" data-lp-type="first_name"/>

Invalid Class

Use the attribute data-lp-invalid-class

<input data-lp-invalid-class="invalid_field" data-lp-type="first_name"/>

Custom Notification Alert

A notification Element in the field level can be defined

Create element initialized with style=”display:none” and set the attribute data-lp-notification-element with the id of the relevant notification element

<div id="first_name_notification" class="notification" style="display:none"></div>

<input data-lp-invalid-class="invalid_field" data-lp-type="first_name" data-lp-notification-element=”first_name_notification”/>