Form

EForm provides a straightforward form validation system that uses functions as rules, allowing for fast and easy validation setup. We have used EForm component in the validation page Demo Here

Import

import EForm from "@components/EForm";

Usage

<template>
  <EForm preventDefault class="w-full" @submit.prevent="submit" ref="formRef">
    <div class="grid sm:grid-cols-2 gap-8">
      <EInput
          :rules="[requiredValidator, emailValidator]"
          label="Email"
          name="email"
          v-model="email"/>

      <EInput
          :rules="[requiredValidator]"
          label="Password"
          name="password"
          v-model="password"/>
    </div>
    <EBtn class="mt-8 me-auto">Submit</EBtn>
  </EForm>
</template>

<script setup>
  // ** Validation Imports
  import {emailValidator, requiredValidator} from "@validators"

  // ** Vars
  const email = ref("")
  const password = ref("")
  const formRef = ref("")

  const submit = () => {
    console.log(formRef.current.isFormValid)
    // True if all the form elements are validated successfully
  }
</script>

WARNING

Make sure to add the name prop to form element if you want to validate them on EForm submit. We use this prop as a unique key to provide a quick snapshot of the validity status for each item, allowing for efficient decision-making and troubleshooting.

Props

For EForm component, the following props are available:

Prop	Type	Default	Note
preventDefault	Boolean	true	Component's label
validateOn	String	-	Triggers children validation on @values: submit, input, blur.
disabled	Boolean	false	Disables the form elements.

Emits

The EForm component contains following emits.

Emit	Description
submit	The submit event occurs when a form is submitted.

Slots

The EForm component provides a default slot that enable you to customize the content.

Slot	Description
default	The default Vue slot.