pixel-validate-vue

Vue 3 validation module. Very simple and lightweight. Fully typed.

To install package run:

# installation
npm install pixel-validate-vue

Basic sage

<script>
  import {$validate, email, required, sameAs} from 'pixel-validate-vue';
  
  # In $validate you have 
  # errorList - object with errors. Keys equals keys in rules and data 
  # validate(rules, data) - check data by rules, returns true or false 
  # set(key: string, message: string) - set some key with error message 
  # unset(key: string) - reset error by key 
  # clearErrors() - clears all errors in list 
  const {errorsList, validate} = $validate;
  
  # data keys and rules keys must be equal, or you can make your own object with rules keys to send it to validate func.  
  const data = ref({
    email: '',
    password: '',
    passwordRepeat: '',
  });
  
  #You can place rules in any file and then import. This will do your script clearer.
  const rules = {
    # plugin has default messages. You can show custom message by sending a string to a method
    # !!! in minLength and sameAs custom message is a second argument
    email: {email: email('The email is invalid'), reqired: required()},
    password: {required: required()},
    passwordRepeat: {required: required(), sameAs: sameAs('password')},
  };
  
  const onSubmit = () => {
    # You can call validate func in any file (any store for example) send data from view and import rules
    # This will make your script setup clearer 
    if (validate(rules, data.value)) {
      return true;
    }  
  }
</script>

<template>
  <form @submit.prevent="onSubmit">
    <div class="form-group">
      <input v-model="data.email" />
      # This key will show one actual error text by priority in rules. Will show nothing when all the rules are done.  
      <div v-if="errorList?.email" class="error">{{errorList.email}}</div>
    </div>
    <div class="form-group">
      <input v-model="data.password" />
      <div v-if="errorList?.password" class="error">{{errorList.password}}</div>
    </div>
    <div class="form-group">
      <input v-model="data.passwordRepeat" />
      <div v-if="errorList?.passwordRepeat" class="error">{{errorList.passwordRepeat}}</div>
    </div>
    <button>Submit</button>
  </form>
</template>

Examples

<script>
  import {$validate, email, required, sameAs} from 'pixel-validate-vue';
  
  const {errorsList, validate, clearErrors, unset, set} = $validate;
  
  const data = ref({
    email: '',
    password: '',
    passwordRepeat: '',
  });
  
  const rules = {
    email: {email: email('The email is invalid'), required: required()},
    password: {required: required(), minLength(8, 'Password is too short')},
    passwordRepeat: {required: required(), sameAs: sameAs('password')},
  };
  
  const onSubmit = () => {
    if (validate(rules, data.value)) {
      return true;
    }
    # setting error with custom key
    set('global', 'Form is invalid');
  }
</script>

<template>
  <form @submit.prevent="onSubmit">
    # will clear all errors
    <div class="clear" @click="clearErrors">Reset errors</div>
    <div class="form-group">
      # unset will clear error on input
      <input v-model="data.email" @input="unset('email')" />
      <div v-if="errorList?.email" class="error">{{errorList.email}}</div>
    </div>
    <div class="form-group">
      <input v-model="data.password" />
      <div v-if="errorList?.password" class="error">{{errorList.password}}</div>
    </div>
    <div class="form-group">
      <input v-model="data.passwordRepeat" />
      <div v-if="errorList?.passwordRepeat" class="error">{{errorList.passwordRepeat}}</div>
    </div>
    <button>Submit</button>
    # custom error
    <div class="global" v-if="errorList.global">{{errorList.global}}</div>
  </form>
</template>

List validators

file(customMessage: string) - checks that the file is valid (field will not be required)
required(customMessage: string) - checks that value not zerolength
minLength(min: number, customMessage: string) - checks length of the string
maxLength(max: number, customMessage: string) - checks length of the string
email(customMessage: string) - checks that email is correct
sameAs(key: string, customMessage: string) - checks that value of the field equals value from key in data object
checked(customMessage: string) - checks that true/false field are checked

You can write your own method and set it in rules! This will work as native.