Need a good client side form validation solution

[toppa]

The credit card form should have client side validation, beyond just the basic HTML 5 validation you get with "required" attributes (also I noticed several fields are passing the HTML 5 validation when they shouldn't - I'm not sure why). I see there are multiple solutions out there for Rails, but some don't apply since we don't have a model to go with the form.

Do we have a go-to solution for client side validation, or should I explore further?

[nicholaides]

I don't think there's a go-to solution for client side validation. Probably requires more research. One lead: Stripe provides a library for making and validating credit card forms.

[nicholaides]

It might be nice to provide some programmatically useful rule data for fields. For instance, somethings that the gem could provide:

• regexp(s) for fields, both JS and Ruby
• human readable error messages for when regexps aren't met
• min, max lengths for fields
• other rules for fields

Even if theres' not a consistent standard, if the tools are provided, it might make it easier to plug the rules into another validation system, even if the developer has to look at the documentation and see how the rules are exposed.

[toppa]

HTML 5 has required, min, max, and pattern attributes. We could have methods in the gem that could provide rules with the use of these attributes in mind. So if someone wants to use just HTML5 browser validation, we would make it easy. If they want to use something additional or different, we're still good, as we're targeting the known HTML5 standards. The only thing I think there isn't a common standard for is how to display field-specific error messages.

[nicholaides]

:thumbsup:

HTML5 does have a way to define error messages, although I think you can only define 1 message per field.

[toppa]

See here for how I approached this. I have a pattern in place for the credit card number, to demonstrate. I learned that if you put a title on the input field, most browsers will show it as part of the html5 error message.

I'm trying to decide whether to leave this in the helper, add it to the Payment model, or make a separate class for it.