Category: JavaScript

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Handling Resets

We can reset the form by adding a button with the type attribute set to reset .

For example, we can write:

<template>
  <Form :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

    <button type="Submit">Submit</button>
    <button type="reset">Reset</button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
};
</script>

When we click the Reset button, the form fields will clear.

Also, we can call the handleReset method from the slot props to do the same thing:

<template>
  <Form v-slot="{ handleReset }" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

    <button type="button" @click="handleReset">Reset</button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
};
</script>

Resetting Forms After Submit

We can also reset forms after submission.

For example, we can write:

<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

    <button type="submit">Submit</button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values, { resetForm }) {
      console.log(values);
      resetForm();
    },
  },
};
</script>

We call the resetForm method in the submit handler to clear the form fields.

The resetForm method optionally takes an object with the values to reset to.

For instance, we can write:

<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

    <button type="submit">Submit</button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values, { resetForm }) {
      console.log(values);
      resetForm({
        values: {
          email: "example@example.com",
          password: "",
        },
      });
    },
  },
};
</script>

to call resetForm with an object. The values property has an object with the form field names and corresponding values set.

We can also call resetForm from the form’s ref:

<template>
  <Form @submit="onSubmit" :validation-schema="schema" ref="form">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

<button type="submit">Submit</button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values, { resetForm }) {
      console.log(values);
      this.$refs.form.resetForm();
    },
  },
};
</script>

Conclusion

We can reset forms with the resetForm method in our Vue 3 app with Vee-Validate 4. It can be accessed in various ways.

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Initial Values

We can set the initial values of the form with the initial-values prop.

To do this, we write:

<template>
  <Form :validation-schema="schema" :initial-values="formValues">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

<button type="Submit">Submit</button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    const formValues = {
      email: "example@example.com",
      name: "Jane Smith",
      password: "password",
    };

    return {
      schema,
      formValues,
    };
  },
};
</script>

We set the initial-values prop with the object with the values.

Setting Form Values

We can set form values using the setFieldValue or setValues methods.

For example, we can write:

<template>
  <Form v-slot="{ setFieldValue, setValues }">
    <Field name="email" as="input" />
    <ErrorMessage name="email" />

    <Field name="password" as="input" />
    <ErrorMessage name="password" />

    <button type="button" @click="setFieldValue('email', 'test')">
      Set Values
    </button>
    <button
      type="button"
      @click="setValues({ email: 'test', password: 'test12' })"
    >
      Set Multiple Values
    </button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    const formValues = {
      email: "example@example.com",
      name: "Jane Smith",
      password: "password",
    };

    return {
      schema,
      formValues,
    };
  },
};
</script>

We have one button that calls setFieldValue to set a single form value.

The first argument is the form field name and the 2nd argument is the value.

The setValues method lets us pass in an object with the form field names as the keys and their corresponding value.

Also, we can use these methods in the submit callback.

For example, we can write:

<template>
  <Form @submit="onSubmit">
    <Field name="email" as="input" />
    <ErrorMessage name="email" />

    <Field name="password" as="input" />
    <ErrorMessage name="password" />

    <input type="submit" />
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    const formValues = {
      email: "example@example.com",
      name: "Jane Smith",
      password: "password",
    };

    return {
      schema,
      formValues,
    };
  },
  methods: {
    onSubmit(values, actions) {
      actions.setFieldValue("email", "abc@example.com");
      actions.setValues({
        email: "abc@example.com",
        password: "password1",
      });
    },
  },
};
</script>

We call setFieldValue in the onSubmit submit handler to set a single form value.

And we call actions.setValues to set multiple values.

values has the original values before calling these methods.

Form validation will be triggered when calling these methods.

We can also call these methods from the ref of the form:

<template>
  <Form @submit="onSubmit" ref="myForm">
    <Field name="email" as="input" />
    <ErrorMessage name="email" />

    <Field name="password" as="input" />
    <ErrorMessage name="password" />

    <input type="submit" />
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    const formValues = {
      email: "example@example.com",
      name: "Jane Smith",
      password: "password",
    };

    return {
      schema,
      formValues,
    };
  },
  methods: {
    onSubmit(values, actions) {
      this.$refs.myForm.setFieldValue("email", "abc@example.com");
      this.$refs.myForm.setValues({
        email: "abc@example.com",
        password: "password1",
      });
    },
  },
};
</script>

Conclusion

We can set the initial values of the form with the initial-values prop.

And we can change the form values with dedicated methods with Vee-Validate 4.

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Handling Submissions

We can submit form data directly to a given URL.

For example, we can write:

<template>
  <Form
    method="post"
    action="https://reqres.in/api/users"
    :validation-schema="schema"
  >
    <Field name="email" as="input" />
    <Field name="name" as="input" type="email" />
    <Field name="password" as="input" type="password" />
    <input type="submit" />
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
};
</script>

We set the method to 'post' and action to the URL that we want to submit our form data to do to the submission.

It’ll only run when the inputted values are valid.

Also, we can manually handle our submissions to handle it the way we like.

For example, we can write:

<template>
  <VeeForm v-slot="{ handleSubmit }" :validation-schema="schema" as="div">
    <form @submit="handleSubmit($event, onSubmit)">
      <Field name="email" as="input" type="text" />
      <Field name="name" as="input" type="text" />
      <Field name="password" as="input" type="password" />

      <button>Submit</button>
    </form>
  </VeeForm>
</template>

<script>
import { Form as VeeForm, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    VeeForm,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values) {
      console.log(values);
    },
  },
};
</script>

We add the Form component and get the handleSubmit method from the slot prop.s

Then we can use the as the submit event handler with the submit $event object and our own onSubmit method to do the submissioins.

Then when we the fields are all valid and we click Submit, we see the data in values logged.

Also, we can use the submitForm method from the slot props to submit directly to a URL.

To do this, we write:

<template>
  <VeeForm v-slot="{ submitForm }" :validation-schema="schema" as="div">
    <form
      @submit="submitForm"
      method="post"
      action="https://reqres.in/api/users"
    >
      <Field name="email" as="input" type="text" />
      <Field name="name" as="input" type="text" />
      <Field name="password" as="input" type="password" />

      <button>Submit</button>
    </form>
  </VeeForm>
</template>

<script>
import { Form as VeeForm, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    VeeForm,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
};
</script>

We set the submit event handler to the submitForm method.

And we set the method and action so we can submit our form data to that URL.

Also, we can use the validate method to validate our form inputs:

<template>
  <Form v-slot="{ validate }" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />
    <button type="button" @click="validate">Submit</button>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
};
</script>

We also get the validate method from the slot props.

Conclusion

We can use the functions from the slot props of the Form component to validate submissions and submit data.

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

ErrorMessage Component

We can use the ErrorMessage component to display error messages.

For example, we can write:

<template>
  <Form>
    <Field name="field" as="input" :rules="rules" />
    <ErrorMessage name="field" />
  </Form>
</template>

<script>
import { Field, Form, ErrorMessage } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Field,
    Form,
    ErrorMessage,
  },
  data() {
    const rules = yup.string().required();

    return {
      rules,
    };
  },
};
</script>

We add the ErrorMessage component and set the name prop to the value of the name prop of the Field component to display the validation error messages for the field.

Custom Labels with Yup

We can change the label of the field.

For example, we can write:

<template>
  <Form :validation-schema="schema">
    <Field name="emailAddr" as="input" />
    <ErrorMessage name="emailAddr" />

    <Field name="accPassword" as="input" />
    <ErrorMessage name="accPassword" />
  </Form>
</template>

<script>
import { Field, Form, ErrorMessage } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Field,
    Form,
    ErrorMessage,
  },
  data() {
    const schema = yup.object().shape({
      emailAddr: yup.string().email().required().label("Email Address"),
      accPassword: yup.string().min(5).required().label("Your Password"),
    });
    return {
      schema,
    };
  },
};
</script>

We call the label method to change the field label.

And when we see the validation error message, we’ll see the field labels display in the error messages.

Form Values

We can get the form values from the slot props of the Form component.

For example, we can write:

<template>
  <Form v-slot="{ values }" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="email" />
    <Field name="password" as="input" type="password" />

    <pre>
      {{ values }}
    </pre>
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
};
</script>

The values property from the slot props has the form values.

So when we type into them, we’ll see the values displayed.

To access the form values in the component object, we can access them from the parameter of the submit handler:

<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="email" />
    <Field name="password" as="input" type="password" />
    <input type="submit" />
  </Form>
</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values) {
      console.log(values);
    },
  },
};
</script>

We add the submit event handler.

Then in the submit event handler, we can access the form values from the values parameter.

When we click submit and the inputted values are all valid, then the onSubmit method will be run.

Conclusion

We can display error messages with the ErrorMessage component.

Also, we can display form values from the slot props and get the form values in the submit handler.

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Validation Behavior

Vee-Validate runs validate when the change event is emitted or when the value is changed externally.

Customizing Validation Triggers

We can change when fields are validated.

To do this, we use the configure function to change this behavior:

<template>
  <Form @submit="submit" :validation-schema="schema" v-slot="{ errors }">
    <Field name="email" as="input" />
    <span>{{ errors.email }}</span>
    <br />
    <Field name="password" as="input" type="password" />
    <span>{{ errors.password }}</span>
    <br />
    <button>Submit</button>
  </Form>
</template>
<script>
import { configure, Field, Form } from "vee-validate";  `
import * as yup from "yup";
configure({
  validateOnBlur: true,
  validateOnChange: true,
  validateOnInput: false,
  validateOnModelUpdate: true,
});
export default {
  components: {
    Field,
    Form,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      password: yup.string().required().min(8),
    });
    return {
      schema,
    };
  },
  methods: {
    submit() {},
  },
};
</script>

validateOnBlur means validation will run when the blur event is emitted.

validateOnChange means validation will run when the change event is emitted.

validateOnInput means validation runs when the input event is emitted.

And validateInModelUpdate means validation runs when the model reactive properties updates.

Displaying Error Messages

We can create our own field and display the error messages by using the slot props.

For instance, we can write:

<template>
  <Form @submit="submit" :validation-schema="schema">
    <Field :rules="rules" v-slot="{ field, errors, errorMessage }" name="email">
      <input v-bind="field" type="text" />
      <p>{{ errors[0] }}</p>
      <p>{{ errorMessage }}</p>
    </Field>
    <br />
    <button>Submit</button>
  </Form>
</template>
<script>
import { Field, Form } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
    });

    return {
      schema,
    };
  },
  methods: {
    submit() {},
  },
};
</script>

We have the validation-schema prop with the validation schema.

And in the Field component, we have the input element.

We pass in the field properties as props to make the validation trigger on the input.

And we show the errors with the errors[0] or errorMessage expressions.

Also, we can display all the error messages for the fields by iterating over the errors object:

<template>
  <Form v-slot="{ errors }" :validation-schema="schema">
    <template v-if="Object.keys(errors).length">
      <p>Please correct the following errors</p>
      <ul>
        <li v-for="(message, field) in errors" :key="field">
          {{ message }}
        </li>
      </ul>
    </template>

    <Field name="name" as="input" :rules="rules" />
    <Field name="email" as="input" :rules="rules" />
    <Field name="password" as="input" :rules="rules" />
  </Form>
</template>
<script>
import { Field, Form } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Field,
    Form,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      password: yup.string().required().min(8),
      name: yup.string().required(),
    });
    return {
      schema,
    };
  },
  methods: {
    submit() {},
  },
};
</script>

We get the keys from the errors object and loop through them with the v-for directive.

The message is the value, and we display them in the li .

Conclusion

We can change when validation is run and display error messages our way in our Vue 3 app with Vee-Validate 4.