質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

Chibichan
Chibichan

総合スコア72

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0リアクション

0クリップ

188閲覧

投稿2022/09/03 17:48

前提

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

実現したいこと

入力した名前が4文字未満の時、「Invalid name」エラーメッセージと入力した名前を残す。
入力した数字がStringの時は、「Invalid year of birth」のエラーメッセージ
入力した数字が1900未満、又は2000以上の時は、「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/ツールのバージョンなど)

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。