Interface with client-side validation plugins

[alexweissman]

In modern web applications, is important to validate form data on both the server-side (for security) and the client-side (for usability). Valitron does the server-side validation quite nicely, and there are some very good client-side validation plugins out there, such as bootstrapvalidator.

However, every time one builds or modifies a form, one must add the appropriate rules to both the server- and client-side code. A really useful feature would be if Valitron could generate the appropriate client-side rules (in JSON, for example) automatically. The client could then fetch these rules from Valitron either when they load the form, or through a separate AJAX request.

[vlucas]

This is an interesting idea. I like it a lot. I currently don't use a client-side validator in my projects (they are mostly REST APIs), but I definitely see the use for this. Seems like a different format would be required for each client-side validator, so there would need to be some sort of simple plugin system, even if that was just $v->exportRules('bootstrapvalidator') that checked for that file and loaded it. If you want to start on something like this, I'd be happy to review it and get it merged in. I think exporting validation rules is within the scope of a validator, and would certainly be a big reason to use Valitron over other projects.

[alexweissman]

Cool, yeah let me see what I can come up with. I agree with being able to explicitly specify the client-side validator; we can start with bootstrapvalidator and see how that goes. Their "programmatic" syntax is just a JSON array of this form:

fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The username can only consist of alphabetical, number and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
}

So I think Validator contains all the necessary data to generate this object. BootstrapValidator also has its own default messages. Sometimes there is an important distinction between client- and server-side messages, especially when you need to be careful what you reveal to the client.

My idea would be to use the default messages of the client-side plugin instead of exporting the server-side messages, unless specifically overridden somehow. Maybe a $v->clientMessage() function would be in order.

[vlucas]

Have you been able to come up with anything on this? I still think this is a good idea.

[alexweissman]

It's on my list - I've been busy implementing a PHP templating engine for Bootstrap for UserFrosting as well as upgrading my company's CRM.

But yeah, I definitely want to get this going soon. It would add a lot to valitron, as well as the bootsole project and UserFrosting (which is now using bootsole to generate forms and templates).

[alexweissman]

Alright, I've got something! Check it out: https://github.com/alexweissman/valitron

There are still a few issues. First, bootstrapvalidator doesn't support the following rules:

dateFormat
dateBefore
dateAfter
instanceOf
array

I'm not sure if array and instanceOf would even make sense for form data, so I think its safe to silently skip those. dateFormat would require that we convert PHP date formats into JS date formats. dateBefore and dateAfter would require support from bootstrapvalidator, I think.

The other issue is that I implement a few of your rules using regular expressions. So, it is possible that a single field might need to match multiple regex's. However, bootstrapvalidator only allows one of each kind of validator per field. So, we'd need to figure out a way to concatenate those multiple regex's into a single rule.

[alexweissman]

The bootstrapvalidator team is planning to add support for multiple regex's in the next release, so that could handle this for us.