商用網站架設實務

LESSON-18 · starter

JavaScript 基礎：表單驗證與非同步概念

你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果：入口頁可以開啟

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Console、網址列、status、disabled 與 aria-busy狀態。

會用到的檔案：index.html、contact.html、style.css、main.js

本堂焦點：掌握表單驗證、preventDefault 與非同步狀態流程

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

TODO-1

先把瀏覽器原生驗證需要的欄位、送出控制項與非同步結果位置建立完整。

目的

先把瀏覽器原生驗證需要的欄位、送出控制項與非同步結果位置建立完整。

修改檔案

contact.html

程式碼位置

contact-form fields and status

現在要做：請在 contact.html 的「contact-form fields and status」位置完成：建立姓名、Email 與需求欄位，加入 required，並放入 role=status 的結果位置

貼上位置：contact.html：contact-form fields and status 區塊，先保留同一檔案的其他內容。

<form id="contact-form">
  <label for="name">姓名</label>
  <input id="name" name="name" autocomplete="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="message">需求</label>
  <textarea id="message" name="message" required></textarea>

  <button id="submit-button" data-submit-control type="submit">送出</button>
  <p id="status" role="status" aria-live="polite" data-state="idle">idle：尚未送出</p>
</form>

預期結果：contact.html 有一個表單、三個帶 label 的 required 欄位、submit button 與 #status；空白送出會先出現原生驗證提示。

驗收證據：Elements 的 form／label／input／textarea 巢狀關係、for 與 id 對照、#status 的 role 與空白送出驗證提示。

卡住時先看這裡

常見錯誤：只放 placeholder、漏掉 required，或讓 label 的 for 和欄位 id 不一致。

第一個檢查：先在 contact.html 逐一核對 form、三個 label、三個控制項、button[type=submit] 與 #status。

TODO-2

先把表單送出事件接到 JavaScript 的處理函式；保留 Checkpoint 的單一缺口，讓學生能看見 preventDefault 應該放在 callback 內。

目的

先把表單送出事件接到 JavaScript 的處理函式；保留 Checkpoint 的單一缺口，讓學生能看見 preventDefault 應該放在 callback 內。

修改檔案

main.js

程式碼位置

submit callback

現在要做：請在 main.js 的「submit callback」位置完成：取得 contact form，建立 submit callback，並把事件交給非同步 lifecycle

貼上位置：main.js：submit callback 區塊，先保留同一檔案的其他內容。

const form = document.querySelector("#contact-form");

function handleSubmit(event) {
  event.preventDefault();
  runSubmission(false);
}

if (form) form.addEventListener("submit", handleSubmit);

預期結果：submit callback 會被觸發並開始本地 mock 的 loading 流程；Checkpoint 前仍會沿用瀏覽器預設送出。

驗收證據：填妥欄位後送出，觀察網址導覽與程式碼中的 submit callback；不要把表單欄位內容寫入 Console。

卡住時先看這裡

常見錯誤：把 listener 掛到 button 的 click、在 callback 外使用 event，或還沒找到 form 就直接呼叫方法。

第一個檢查：只搜尋 form.addEventListener("submit"，確認 callback 收到 event 並呼叫 runSubmission。

TODO-3

理解 Promise 等待期間的 loading、成功與失敗回饋，以及 finally 如何確保送出按鈕恢復可用。

目的

理解 Promise 等待期間的 loading、成功與失敗回饋，以及 finally 如何確保送出按鈕恢復可用。

修改檔案

main.js

程式碼位置

async lifecycle

現在要做：請在 main.js 的「async lifecycle」位置完成：用本地 mock Promise 完成 idle → loading → success/error → finally 狀態流程

貼上位置：main.js：async lifecycle 區塊，先保留同一檔案的其他內容。

function mockSubmit(shouldFail) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      if (shouldFail) reject(new Error("mock failure"));
      else resolve();
    }, 350);
  });
}

async function runSubmission(shouldFail) {
  setStatus("正在等待 mock 結果", "loading");
  setLoading(true);
  try {
    await mockSubmit(shouldFail);
    setStatus("測試詢問已收到", "success");
  } catch {
    setStatus("模擬失敗，請保留輸入後重試", "error");
  } finally {
    setLoading(false);
  }
}

預期結果：送出後 status 先顯示 loading 並停用控制項；本地 mock Promise resolve 時顯示 success，reject 時顯示 error，finally 讓控制項恢復且不清空輸入。

驗收證據：status 的時間順序、控制項 disabled 前後狀態、data-state、aria-busy 與輸入欄位在結果後仍保留。

卡住時先看這裡

常見錯誤：使用真實 endpoint 或 fetch、只寫 setTimeout 沒有 Promise、漏掉 catch/finally，或在等待期間允許重複送出。

第一個檢查：先確認 new Promise 只使用 window.setTimeout，再依序找 setStatus、control.disabled、try/catch/finally。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 starter 的可執行入口

index.html階段入口：說明本階段結果，並以真實相對路徑連到 contact.html。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript 基礎：表單驗證與非同步概念</title>
<link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header"><a class="brand" href="index.html">安心維護</a><span class="single-page-label">本堂單頁練習</span></header>
<main class="page-shell">
<p class="eyebrow">LESSON-18 · 掌握表單驗證、preventDefault 與非同步狀態流程</p>
<h1>JavaScript 基礎：表單驗證與非同步概念</h1>
<p class="page-description">掌握表單驗證、preventDefault 與非同步狀態流程</p>
<!-- lesson-slot -->
<section class="result-card" aria-labelledby="result-title"><h2 id="result-title">本階段入口</h2><p id="status" class="status" role="status" aria-live="polite" data-state="idle">idle：先開啟 contact.html 觀察目前缺口</p><p>這頁只負責說明入口；真正的 form、欄位與狀態流程在同資料夾的 contact.html。</p><p><a class="button-link" href="contact.html">開啟聯絡表單</a></p></section><section class="result-card"><h2>本階段要觀察</h2><p>先完成表單結構、submit handler 與非同步狀態的三個微步驟；先看見結果，再進入 Checkpoint。</p></section>
</main>
<script src="main.js" defer></script>
</body>
</html>
contact.html表單頁：提供 label、欄位、原生驗證、submit 與狀態觀察位置。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聯絡表單與狀態</title>
<link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header"><a class="brand" href="index.html">安心維護</a><span class="single-page-label">本堂單頁練習</span></header>
<main class="page-shell">
<p class="eyebrow">LESSON-18 · 掌握表單驗證、preventDefault 與非同步狀態流程</p>
<h1>聯絡表單與狀態</h1>
<p class="page-description">掌握表單驗證、preventDefault 與非同步狀態流程</p>
<!-- lesson-slot -->
<section class="result-card"><p class="eyebrow">LESSON-18 · starter</p><h2>表單驗證與非同步狀態</h2><p>先測試空白驗證，再測試 success／error；每次只看一個證據。</p><form id="contact-form" action="contact.html" method="get">
  <div class="field"><label for="name">姓名</label><input id="name" name="name" autocomplete="name"></div>
  <div class="field"><label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email"></div>
  <div class="field"><label for="message">需求</label><textarea id="message" name="message"></textarea></div>
  <button id="submit-button" data-submit-control type="submit">送出</button>
  <!-- TODO-1：為三個欄位補上 required，並為 status 補上 aria-live="polite"。 -->
  <p id="status" class="status" role="status" data-state="idle">idle：尚未送出</p>
</form><p><a href="index.html">回到階段入口</a></p></section>
</main>
<script src="main.js" defer></script>
</body>
</html>
style.css呈現層：提供表單欄位、status、disabled、focus 與窄版可讀性。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.site-header { width: min(100% - 2rem, 760px); margin: 1rem auto 0; padding: .75rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.site-header a { color: #155e75; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .05em; }
.page-description { color: #52657d; }
.result-card { margin-top: 1rem; padding: 1rem; border: 1px solid #d8e0ea; border-radius: 14px; background: #fbfdff; }
.field { display: grid; gap: .35rem; margin-top: 1rem; }
input, textarea, button { font: inherit; }
input, textarea { width: 100%; padding: .65rem; border: 1px solid #9fb2c5; border-radius: .5rem; }
textarea { min-height: 6rem; resize: vertical; }
button, .button-link { display: inline-block; margin: 1rem .5rem 0 0; padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; text-decoration: none; cursor: pointer; }
button.secondary { background: #64748b; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
.status { min-height: 2rem; font-weight: 700; }
.status[data-state="success"] { color: #17643d; }
.status[data-state="error"] { color: #b42318; }
@media (max-width: 560px) { .site-header { align-items: flex-start; flex-direction: column; } .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.6rem; } }
main.js行為層：處理 submit、preventDefault、mock Promise 與 idle/loading/success/error 狀態。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
const form = document.querySelector("#contact-form");
const status = document.querySelector("#status");
const controls = document.querySelectorAll("[data-submit-control]");

// TODO-2：在 submit handler 位置監聽表單送出，讓 callback 收到 event。
// TODO-3：建立 loading、mock Promise、success/error 與 finally 的狀態流程。

完成驗收

下一步

Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。

前往 Checkpoint，自己補最後一個核心缺口