Form validation in Vue

Vue interview exercise on Patterns, difficulty 2 of 3. Solve it in the editor beside a worked example; the tests run the moment you do.

Write SignupForm: <input class="email"> and <input class="password"> (v-model on a reactive form), each followed by <p class="error"> when it has an error and has been touched (blurred) or a submit was attempted. Errors: "Email is required", "Email must contain @", "Password must be at least 8 characters". Submitting (prevent the default) emits `submit` with { email, password } only when there are no errors.

Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Progress is saved in your browser, and in your account if you sign in.

More Patterns in Vue

All Vue exercises · Other languages and frameworks