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”/>