README.md

Idea

EmForm is Vue form component that exposes form validation functionality without the need to implement the validation yourself and is using the popular Vuelidate package as a dependancy.

It is based on scoped slots, so you can provide as simple or complex form as needed, whilst component is taking care of validation for you.

Usage

Demo here

<EmForm :validationProps="validationOptions">
  <template slot-scope="{form: {name, url}, v, sent, sentChange}">
    <input
      v-model="v.form.name.$model"
      placeholder="Enter name"
    >
    <div v-if="sent && v.form.name.$invalid" class="error-message">
      Please enter valid name(greater than 3 chars)
    </div>
    <input v-model="v.form.url.$model" placeholder="Enter url">
    <div v-if="sent && v.form.url.$invalid" class="error-message">
      Please enter valid url
    </div>
    <div class="submit">
      <button @click="closeAddLinkDialog">
        Cancel
      </button>
      <button
        type="primary"
        @click="confirmAddLink(name, url, sentChange, v)"
        :disabled="!v.form.$dirty"
      >
        Add link
      </button>
    </div>
  </template>
</EmForm>

EmForm component requires validationProps which is an array with validation objects in the following format (can be defined in data object or computed properties):

validationOptions: [
  {
    name: "name",
    initValue: "",
    rules: ["required", { name: "minLength", params: [3] }]
  },
  {
    name: "url",
    initValue: "",
    rules: ["required", "url"]
  }
      ],

With the scoped slots we can expose form, v (vuelidate object), sent and sentChange properties.

v is used to set v-model values to v.form.[property that we exposed from form].$model.

sent is used for checking if error message should be shown, where sentChange is callback that switches sent property to true, essentially giving control over the displaying error property.

sent and sentChange usage is not mandatory (unlike form and v), but it is giving rather more flexibility in how you want to control your form (do you want to be able to start typing and then get error message, or you just wanna disable button until conditions are met, etc.)

confirmAddLink(name, url, sentChange, v) {
  sentChange();
  if (v.form.$invalid) return;
  try {
    //method code...
  } catch (error) {
    //error handling code
  }
},