Vuelidate - validating login and signup forms, combined in a single form

Question

I'm using Vuelidate for Vue3 and I've created a single form in a modal that serves as both login and registration form.

When you click the Register button, the form displays 4 fields - username, email, password and repeat password. Clicking the Login button only displays the email and password fields from the same form.

How can I validate the Register form separately from the Login form when we have 2 overlapping fields used in both forms - email and password.

Answer 1

Simply share rules by extending them in the broader case:

const loginRules = {
  // [...]
};

const registerRules = {
  ...loginRules, 
  // [...]
};