Validate submitted form and display errors gracefully - express

Question

I am trying to validate user submitted form and display meaningful errors, but I have a lot of problems. First of all, my form (event_form.ejs):
<% if (typeof errors !== 'undefined') { %>
<div class="message"><%= errors %></div>
<% } %>
<form method="POST" action="/submit-create-event" id="create-event">
<input type="text" class="title" name="title" placeholder="title">
<input type="text" class="date" autocomplete="off" name="date" placeholder="date">
<select class="type" name="type">
<option value="road">Road</option>
<option value="mtb">MTB</option>
</select>
<input type="text" class="city" name="city" placeholder="city">
<select class="level" name="level">
<option value="beginner">Beginner</option>
<option value="advanced">Advanced</option>
<option value="pro">Pro</option>
</select>
<input type="text" class="start-time timepicker" autocomplete="off" data-time-format="H:i" name="startTime" placeholder="start time">
<input type="text" class="start_location" name="startLocation" placeholder="start location">
<input type="text" class="distance" name="distance" placeholder="distance">
<input type="submit" class="create-event-submit">
</form>
On submit, in my eventController.js I have function to handle submit.
//Helper function to handle event form submit.
module.exports.submitEventForm = function(req, res) {
const event = new eventModel.event({
title: req.body.title,
date: req.body.date,
type: req.body.type,
city: req.body.city,
level: req.body.level,
start_time: req.body.startTime,
start_location: req.body.startLocation,
distance: req.body.distance
});
event.save(function(err, data) {
if (err) {
console.log(err);
//I tried this, kinda works but pretty sure a bad practice
res.render('forms/create_event_form', {errors: err})
} else {
res.render('status/success');
}
});
};
As you can see, on event.save() if I have errors, I console.log() them at the moment. What I tried doing was rendering once again my event creation form and displaying errors (as visible in my .ejs file). Pretty sure it should not be done like that.
This is my model file with one validator
var mongoose = require('mongoose')
var validate = require('mongoose-validator')
var Schema = mongoose.Schema;
var titleValidator = [
validate({
validator: 'isAlphanumeric',
message: 'Title should be alphanumeric'
})
]
var eventSchema = new Schema({
title: {type: String, required: true, validate: titleValidator},
date: {type: String },
type: {type: String },
city: {type: String },
level: {type: String },
start_time: {type: String },
start_location: {type: String },
distance: {type: Number },
});
var Event = mongoose.model('Event', eventSchema);
module.exports.eventSchema = eventSchema;
module.exports.event = Event;
I created titleValidator, and if my form fails, it prints out something like this:
My questions is: How can I properly send my validator message to the template and display it? How to handle multiple messages once more validators are created, as errors are not returned in array manner, meaning I cannot loop through them?

Answer 1

Kinda found a solution. To make error messages more readable and usable, I used Mongoose error helper. It prints out all error messages neatly. However, when getting package via npm there is a bug in code and a pull request is created for a solution, but was never merged. Just make that minor change manually.
I couldn't find another way of rendering the same form with errors, so I sticked to this:
event.save(function(err) {
if (err) {
res.render('forms/create_event_form', {errors: errorHelper(err, next)});
} else {
res.render('status/success');
}
});
and in my .ejs template I print out errors as follows:
<% if (typeof errors !== 'undefined') {
errors.forEach(function(err) { %>
<div class="message"><%= err %></div>
<% })} %>
Hope this helps someone, cheers.