Question

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:

1. Client side form submit
2. Validation on node
3. Redirect to the view that rendered the form in step 1.

I’m leaning toward req.flash() to display form input messages but perhaps there is a more OOP approach to this?

Answer 1

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.