名前がアルファベットで４文字未満の場合、その入力した名前を残してエラーメッセージを送りたい

Question

前提

入力文字数が４文字未満の時に、「Invalid name」のエラーメッセージとともに
入力した文字を残したいです。

実現したいこと

入力した名前が４文字未満の時、「Invalid name」エラーメッセージと入力した名前を残す。
入力した数字がStringの時は、「Invalid year of birth」のエラーメッセージ
入力した数字が１９００未満、又は２０００以上の時は、「Year of birth should be between 1900 and 2000」のエラーメッセージ
エラーメッセージは、すべてリストでだす

発生している問題・エラーメッセージ

app.jsファイルで名前の残し方がわかりません。

該当のソースコード

ミドルウエアファイルもありますが、そちらは、変更の必要がないので割愛します。

app.js
import { Application, Router } from "https://deno.land/x/oak@v10.6.0/mod.ts";
import { renderMiddleware } from "./middlewares/renderMiddleware.js";

const app = new Application();
const router = new Router();

app.use(renderMiddleware);

const showForm = ({ render }) => {
  render("index.eta");
};
const errorData = {
  errors: [],
}

const submitForm = async ({ request, response,render }) => {
  const body = request.body();
  const params = await body.value;
  const name = params.get("name");
  const yearOfBirth = params.get("yearOfBirth")
 
  if (name.length < 4) {
    errorData.errors.push("Invalid name");  
  } else if(!isNaN(yearOfBirth)){
     errorData.errors.push("Invalid year of birth");
  } else if(yearOfBirth<1999 || yearOfBirth>2000){
      errorData.errors.push("Year of birth should be between 1900 and 2000");
      }   
      render("index.eta", errorData); 
  };
router.get("/", showForm);
router.post("/", submitForm);

app.use(router.routes());
app.listen({ port: 7777 });

index.eta
<h1>Name and year of birth!</h1>
<form method="POST">
    <input type="text" name="name" value="<%= it.name %>" />
    <input type="number" name="yearOfBirth" />
    <input type="submit" value="Submit!" />
</form>

<% if (it.errors && it.errors.length > 0) { %>
<ul>
  <% it.errors.forEach((error) => { %>
    <li><%= error %></li>
  <% }); %>
</ul>
<% } %>

試したこと

const errorData = { errors: [], name: " ",}にして、If文のname.lengthのところに
errorData.name.push(name)を足してみましたが、エラーになりました。
それぞれのif文にconst errorDataを入れて、一番初めのif文にだけ、このように(const errorData = { errors: [Invalid name], name: name,})してみましたが、
それだとerrorData is not definedのエラーメッセージが返ってきました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

解釈があっているかわかりませんが、名前を表示じゃなくて変数に格納するとして話します
方法の一つですが、エラーと名前が１対１になっているなら以下のような辞書の配列にするといけると思います

変数定義は

const errorDatas = []

としておいて、if文には

errorData.push({error:"Invalid Name", name: name})

と書くと追加できると思います
あとhtmlの方ではerrorDatasをfor文で回しながらのerror,nameを処理して表示する感じです

ちなみに

errorData.name.push(name)

はerrorData.nameが配列じゃないのでpush出来ないエラーが出ているんだと思います

Comments

[Chibichan]

ありがとうございます！勉強になりました！