<template>
  <div
    id="app"
    class="flex gap-4 justify-center items-center min-h-screen flex-col"
  >
    <h1 class="text-3xl font-bold mb-8">Vue 客戶端原生表單驗證</h1>

    <form
      @submit.prevent="handleSubmit"
      class="group flex flex-col gap-4"
      novalidate
    >
      <label for="email" class="mb-5">
        <span>電子信箱</span>
        <input
          type="email"
          name="email"
          id="email"
          class="border invalid:[&:not(:placeholder-shown):not(:focus)]:border-red-500 peer"
          placeholder="請輸入您的電子信箱"
          required
        />
        <span
          class="invisible peer-[&:not(:placeholder-shown):not(:focus):invalid]:visible"
        >
          請輸入和規的 email 地址
        </span>
      </label>
      <label for="password" class="mb-5">
        <span>密碼</span>
        <input
          type="password"
          name="password"
          id="password"
          class="border invalid:[&:not(:placeholder-shown):not(:focus)]:border-red-500 peer"
          placeholder="請輸入您的密碼"
          required
          pattern=".{7,}"
        />
        <span
          class="invisible peer-[&:not(:placeholder-shown):not(:focus):invalid]:visible"
        >
          密碼必須 7 字元長
        </span>
      </label>
      <button
        type="submit"
        class="group-invalid:pointer-events-none group-invalid:opacity-50"
      >
        Submit
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleSubmit(e) {
      console.log(e.target);
    }
  }
};
</script>