экспресс-валидатор и заполнение поля ввода после ошибки - PullRequest
0 голосов
/ 02 апреля 2019

Я относительно новичок в узлах и выражениях и столкнулся с проблемой, которую не могу решить.

Я создал SSCCE, который пытается принять два ввода: имя и высоту,и если есть ошибка проверки, снова отобразите ту же страницу с этими значениями.

Если я введу «2.2.2» в поле высоты (очевидно, не с плавающей точкой), значение не будет перерисовано.Если я изменю ввод высоты на type = "text", поле будет отображено с предыдущим значением.Все остальные поля типа text ведут себя как положено.

Я поместил 'novalidate' в форму, но разве это странно с типом ввода чисел?Или я допустил простую ошибку?

(я также немного озадачен тем, почему isFloat () принимает 2 как действительное)

Любая помощь будет оценена

app.js

const express = require('express');

const app = express();
const bodyParser = require('body-parser');
const { check } = require('express-validator/check');
const { validationResult } = require('express-validator/check');


app.use(bodyParser.urlencoded({ extended: false }));

app.set('view engine', 'ejs');
app.set('views', 'views');

app.get('/', (req, res, next) => {
    res.render('test', {
        pageTitle: 'Test',
        hasError: false,
        validationErrors: []
    })
});

app.post('/', 
    [
        check('name', 'Name must be at least 2 letters in length')
            .isLength({min: 3}),
        check('height', 'Height must be a float')
            .isFloat()
    ] , 
    (req, res, next) => {
        const errors = validationResult(req);

        if(!errors.isEmpty()){
            console.log(errors.array());
            return res.render('test', {
                pageTitle: 'Error',
                hasError: true,
                validationErrors: errors.array(),
                person: {
                    name: req.body.name,
                    height: req.body.height
                }
            })
        } else {
            res.send(`Person created: ${req.body.name}, height: ${req.body.height}`);
        }
    });

app.listen(3000);

test.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= pageTitle %></title>
</head>

<body>
    <div class="errorMessage"><%= validationErrors.length > 0 ? validationErrors[0].msg:'' %></div>
    <form action="/" class="test-form" method="POST" novalidate>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" value="<%= hasError ? person.name:'' %>">

        <label for="height">Height</label>
        <input type="number" name="height" id="height" value="<%= hasError ? person.height:'' %>">    
        <button class="submit">Submit</button>
    </form>
</body>

</html>

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^2.6.1",
    "express": "^4.16.4",
    "express-validator": "^5.3.1"
  }
}

1 Ответ

0 голосов
/ 03 апреля 2019

Я отказался от этого. Похоже, не было никакого способа получить поле ввода типа номер для отправки недопустимого значения, даже с novalidate.

Так что я просто изменил тип на текст.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...