I am currently facing an issue with my form validation using the hapi/Joi package. The problem is that the schema keys are all taking the value of "undefined", which results in the first validation error being returned. How can I resolve this issue? Additionally, I would like to know if there is a way to display errors to the user without refreshing the page in Express. If so, please provide guidance on how to achieve this.
Here is my Express code:
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
const Joi = require('@hapi/joi');
const uuidv4 = require('uuid/v4');
app.set('view engine','ejs');
const urlEncodedParser = app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname + '/public')));
app.get('/',(req,res)=>{
res.render('main');
});
const schema = Joi.object().keys({
name: Joi.string().min(3).required(),
surname: Joi.string().min(5).required(),
age: Joi.number().integer(),
email: Joi.string().email({minDomainSegments: 2}).required(),
password: Joi.string().min(3).required(),
confirm: Joi.any().valid(Joi.ref('password'))
});
app.post('/register',(req,res)=>{
req.body.id = uuidv4();
console.log(req.body);
const result = Joi.validate({
name: req.body.name,
surname: req.body.surname,
age: req.body.age,
email: req.body.email,
password: req.body.password,
confirm: req.body.confirm
}, schema,(error,value)=>{
if(error){
printError(error);
}
else{
console.log('success');
}
});
});
function printError(error){
console.log(error);
}
app.listen(3000);
Below is my form:
<form action="/register" method="POST" enctype="multipart/form-data">
<input type="text" name='name' class="form-control" value="">
<input type="text" name='surname' class="form-control" value="">
<input type="number" name='age' class="form-control" value="">
<input type="email" name='email' class="form-control" value="">
<input type="password" name='password' class="form-control">
<input type="password" name='confirm' class="form-control">
<input type="submit" class="btn btn-block btn-success" value="OKAY">
</form>
The error message received:
{ ValidationError: child "name" fails because ["name" is required]
at Object.exports.process (C:\xampp\htdocs\express+mongo\node_modules\@hapi\joi\lib\errors.js:202:19)
at internals.Object._validateWithOptions (C:\xampp\htdocs\express+mongo\node_modules\@hapi\joi\lib\types\any\index.js:763:31)
at module.exports.internals.Any.root.validate (C:\xampp\htdocs\express+mongo\node_modules\@hapi\joi\lib\index.js:145:23)
at app.post (C:\xampp\htdocs\express+mongo\index.js:31:24)
at Layer.handle [as handle_request] (C:\xampp\htdocs\express+mongo\node_modules\express\lib\router\layer.js:95:5)
at next (C:\xampp\htdocs\express+mongo\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\xampp\htdocs\express+mongo\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\xampp\htdocs\express+mongo\node_modules\express\lib\router\layer.js:95:5)
at C:\xampp\htdocs\express+mongo\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\xampp\htdocs\express+mongo\node_modules\express\lib\router\index.js:335:12)
isJoi: true,
name: 'ValidationError',
details:
[ { message: '"name" is required',
path: [Array],
type: 'any.required',
context: [Object] } ],
_object:
{ name: undefined,
surname: undefined,
age: undefined,
email: undefined,
password: undefined,
confirm: undefined },
annotate: [Function] }
Despite filling in the input fields in the form and submitting, the error "name is required" is displayed.