Vue Form Validation

How it works

Input elements provide editing affordances, but your application still needs a domain contract. The count below must be a whole number between one and five. The helper parses the complete string instead of accepting a numeric prefix such as 2bags. The submission handler refuses invalid values and leaves the accepted count unchanged. This is a local demonstration, not server authorization.

Run the code

Use a separate empty learning folder with Node 22.12+ in the 22 series. The reviewed Node version is 22.15.1. Save all files below with their exact relative paths; downloads may keep only the basename, so create src and any tests folders as listed. This project pins Vue 3.5.44 and Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints.

Bhylu has no Vue playground. SFCs, npm imports and routing need this local project; do not paste them into the plain HTML or JavaScript editor. Apache, MySQL and changes to Bhylu server settings are not required. The application is a fictional seed-swap learning fixture.

• package.json
• index.html
• vite.config.mjs
• src/main.js
• src/App.vue
• src/style.css

Example

<script setup>
import { ref } from "vue";

const draft = ref("2");
const accepted = ref(0);
const error = ref("");
function parseCount(raw) {
  if (!/^[1-5]$/.test(raw)) return null;
  return Number(raw);
}
function submit() {
  const count = parseCount(draft.value);
  if (count === null) {
    error.value = "Use a whole count from 1 to 5";
    return;
  }
  accepted.value = count;
  error.value = "";
}
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <form @submit.prevent="submit">
      <label for="count">Packet count</label
      ><input
        id="count"
        v-model="draft"
        inputmode="numeric"
        :aria-invalid="Boolean(error)"
        aria-describedby="count-error"
      /><button>Check count</button>
    </form>
    <p id="count-error" role="alert">{{ error }}</p>
    <output data-result>{{ accepted }}</output>
  </main>
</template>

Expected result

A valid count is accepted locally; malformed input shows an error and preserves it.

After accepting two, try 2bags or zero and submit again. The old accepted result stays two, and the error explains the allowed range. A real endpoint must repeat validation against authoritative availability and return its own acceptance result.