Our registration and login forms require server-side validation logic. I'd like to come up with the best way of displaying messages for each input block on the client.
The application flow:
I'm leaning toward req.flash()
to display form input messages but perhaps there is a more OOP approach to this?
I have a validation middleware that will validate form data. I can tell the middleware what form to rerender if validation fails and it will have an errors object with the name of the field and an array of errors that field has.
My forms end up looking like this:
include ../mixins/form-helpers
mixin errors()
form(action=url('messages_create'), method='post')
mixin csrf()
fieldset
legend contact
mixin field('text', 'subject', 'Subject')
mixin field('textarea', 'message', 'Message')
.form-actions
mixin submit('Send')
If I post this form without subject and message I set the following object.
var errors = { subject: ['is required'], message: ['is required'] };
My errors mixin will render all the errors and my field mixin will add an error class so I can add a red border to my failing fields.
Check out Validity. It is designed specifically for attaching validations and errors to form input fields and rendering them appropriately.