Nightly Panic Munchies


    2.0.0 • Public • Published


    Form validation for Vue.js powered by HTML5

    Build status


    • Easy: integrates with Vue.js to provide a reactive interface for working with validity state.
    • Lightweight: uses the HTML5 validation API whenever possible.
    • Flexible: allows you to set the validity state within your own custom validators.
    • Convenient: adds a configurable .wasSubmitted class to your forms when they are submitted and .wasFocused class to your fields when they are focused so that you're able to have more control when styling invalid fields with the :invalid psuedo-class.


    1. Install vueform:

      npm install vueform --save
    2. Tell Vue.js to use vueform and then create a new form in your component data hook:

      import Vue from 'vue'
      import VueForm from 'vueform'
      data() {
        return {
          contactForm: new VueForm()
    3. Pass the form object to vueform with the v-form directive:

      <form v-form="contactForm">
      <!-- ... -->
    4. Add a form field to the form. Make sure it has an id property so that it can be identified:

      <label for="name">Name:</label>
      <input type="text" id="name" v-model="" required>

      Note: When you're grouping radio buttons or checkboxes by the same name property and you want to validate that the group has a value (i.e. one of the elements is checked), simply pass the name of the group to the VueForm instance in the required array:

      const reasons = { name: 'reasons', required: () => isReasonsRequired }
      patientForm: new VueForm({ required: ['sex', reasons] })
    5. By default, your form will be set to noValidate which tells the browser to slow it's roll and gives you more control over the validation process. This means the browser won't show validation error messages. You can either display your own validation error messages, for example:

      <div v-if="contactForm.$wasSubmitted" class="colorRed">
        <div v-if="">
          Name is required.
        <div v-if="">
          Please use only letters, spaces, dashes, and apostrophes.

      Or disable noValidate so that the browser displays validation error messages, by passing the noValidate: false option when creating your form, for example:

      contactForm: new VueForm({ noValidate: false })


    VueForm constructor options (with default values):

      wasFocusedClass: `wasFocused`
      wasSubmittedClass: `wasSubmitted`
      noValidate: true,
      ignoredFields: [],
      requiredGroups: [],
      customValidators: {}

    VueForm.state properties:

    Property Type Description
    wasSubmitted Boolean True if the form was submitted.
    isInvalid Boolean True if the form is invalid.
    isValid Boolean True if the form is valid.
    invalidFields Array A collection of names of invalid fields.
    fields Object A map of

    VueForm methods:

    Method Parameters Description
    $setCustomValidity field: String, invalid: Boolean or String A convenience wrapper for element.setCustomValidity(). Useful when updating the validity of a field based on a custom validator.


    npm i vueform

    DownloadsWeekly Downloads






    Last publish


    • ianwalter