Invalid value with express validator using html and pug - html

Question

I am new at pug and nodejs.
I am trying to create a validation form before i can send to the next page, but i am struggling with it. I have already succeed with form validation using html, but when i've changed to pug, i encountered issues and i get 'invalid input' with all the data i send.
here is the error:
{"errors":[{"msg":"Invalid value","param":"boardname","location":"body"},{"msg":"Invalid value","param":"ipaddress","location":"body"},{"msg":"Invalid value","param":"portnum","location":"body"}]}
Here is index form
<form action="/board" method="post" class="cntbox" enctype = multipart/form-data id="formBoard" name="formOfBoard" onsubmit="validateIndexForm(event)">
<!--Close Button of the pop up-->
<div class="righttopicon" onclick="closeForm()">
<img src="images/square-x.png" alt="close icon">
</div>
<!--Form with the necessary inputs (Name of the Board, IP Address, Port and upload file). All the inputs are required-->
<div class="col-100">
<h3>Add new board:</h3>
</div>
<!--Input for the boards name with max length of 50 characters-->
<div class="col-75">
<label for="bname">Name of the Board: *</label><br>
<input type="text" id="boardname" name="boardname" placeholder="Ex: Board 1" maxlength="75">
</div>
<!--Input for the IP Address that can only accept IP's and with a max length of 15 characters-->
<div class="row">
<div class="col-75">
<label for="ipaddress">IP Address: *</label><br>
<input type="text" name="ipaddress" id="ipaddress" placeholder="Ex: 192.168.1.1" maxlength="15">
</div>
</div>
<!--Input for the Port that can only accept numbers with a max length of 4-->
<div class="row">
<div class="col-75">
<label for="portnum">Port: *</label><br>
<input type="text" name="portnum" id="portnum" placeholder="Ex: 8080" maxlength="4" minlength="2">
</div>
</div>
<!--Input for the upload of the boards image that can only accept .png files-->
<div class="row">
<div class="col-75">
<label for="imgadd">Upload image:</label><br>
<img src="images/file-upload.png" alt="Insert image" class="insrtimg" name="imageboard" id="insertimage">
<input type="file" id="myFile" name="myFile" onchange="fileValidation(event)">
</div>
</div>
<!--'Save' and 'Discard' buttons -->
<div class="row">
<div class="col-80">
<div class="btnformcontainer">
<input type="submit" class="btnfrm btnconfrm" value="Save">
<div class="btnfrm btndel" onclick="discardValues()">Discard</div>
</div>
</div>
</div>
</form>
and the server (named servertest2 for test purposes)
var express= require('express');
var path = require('path');
var app = express();
var bodyParser = require('body-parser');
var {check, validationResult} = require('express-validator');
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
//Allow to send json to the server
app.use(express.json());
//Serve images, css files and javascript files in the directory named 'public'
app.use(express.static(path.join(__dirname, 'public')));
//Load view engine
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, './public/views'));
app.get('/', function(req,res){
res.sendFile(path.join(__dirname, '/public/views/index.html'));
});
app.get('/index', function(req,res){
res.sendFile(path.join(__dirname, '/public/views/index.html'));
})
app.get('/board', function(req,res){
res.render('board.pug');
})
app.post('/board', [
check('boardname').notEmpty().isLength({max : 75}),
//check if ipaddress is an IP
check('ipaddress').isIP() || check('ipaddress').equals('localhost' === 'localhost'),
//check if port is a number with max length of 4
check('portnum').isPort({max:4}),
],
function(req,res){
let errors = validationResult(req)
//check for errors and return json with results
if(!errors.isEmpty()){
return res.status(422).json({errors: errors.array()})
}
console.log(req.body.boardname);
console.log(req.body.ipaddress);
console.log(req.body.portnum);
//console.log(req.body.myFile);
let nameboard = req.body.boardname;
res.render(('board.pug'), {name : nameboard});
})
//Start Server
app.listen(3000, function(){
console.log('Server listening at port 3000');
});

Answer 1

!= messages('message', locals)
if errors
each error, i in errors
div(class='alert alert-danger') #{error.msg}