Add 'possibly-valid' class

[colinmollenhour]

Currently there are "valid" and "invalid" classes but this does not allow for a way to style the element while input is still being added any differently than "invalid" input which is not a great user-experience. Adding a third class like "possibly-valid" would allow more styling flexibility and to fix this issue.

For example I currently have something like this:

        '#heartland-field.invalid': {
            'color': '#a94442',
            'border-color': '#a94442'
        },

The color of the field is red immediately as the customer starts entering the number. If the "possibly-valid" class was added then we could do this:

        '#heartland-field.invalid': {
            'color': '#a94442',
            'border-color': '#a94442'
        },
        '#heartland-field.possibly-valid.invalid': {
            'color': '#959595 !important',
            'border-color': '#959595 !important'
        },

This should not break any existing integrations unless perhaps they did not use a safe method of checking the class names array passed through events.

The logic for determining "possibly valid" would be to match a regex that indicates fewer than required number of digits or just checking the string length.

• Card numbers: For Amex prefixes less than 15 digits, for all others less than 16 digits are possibly valid. One digit can be always considered possibly valid and greater than two digits is possibly valid only if the type can be determined.
• Exp month: A 0 or 1 is possibly valid
• Exp year: Less than four digits is possibly valid
• Cvv: For Amex less than 4 digits, for all others less than 3 digits are possibly valid

Since the fields are hosted on your own servers this is not something I can add to a locally modified version. Is this something you could add for me and if so, hopefully pretty soon? We had to go ahead and go live for PCI compliance but our UX is not what we want it to be yet.

Thanks, Colin

[slogsdon]

Hi Colin,

We're taking a look on our side to see what changes would be required and how quickly we can get them sipped.

[colinmollenhour]

Thanks!