Avav Smith

Avav Smith

1578555036

Simple Vuex Module to Handle Form Fields and Validations.

Simple Vuex module to handle form fields and validations.

vuex-module-validatable-state

You can build a view model for your form, which runs valdations easily. You just provide initial fields and validators to build the module, then map getters/actions to components.

Usage

Installation

$ npm i vuex-module-validatable-state

Register to core Vuex module

This module provides the function to return Vuex module as default. The function takes arguments:

  • Initial field set
  • Validators

A. Define directly

import validatableModule from "vuex-module-validatable-state";

const initialFields = {
  amount: null,
  description: "default text"
};

const validators = {
  amount: [
    ({ amount }) => amount === null ? "Require this" : false
  ],
  description: [
    ({ description }) => description.length > 15 ? "Should be shorter than 15" : false,
    ({ description, amount }) => description.indexOf(amount.toString())  ? "Should include amount" : false,
  ]
};

new Vuex.Store({
  modules: {
    myForm: {
      namespaced: true
      store,
      getters,
      actions,
      mutations,
      modules: {
        ...validatableModule(initialFields, validators) // <-- HERE
      }
    }
  }
});

B. Register to existing module

import { register } from "vuex-module-validatable-state";

const initialFields = {
  amount: null,
  description: "default text"
};

const validators = {
  amount: [
    ({ amount }) => amount === null ? "Require this" : false
  ],
  description: [
    ({ description }) => description.length > 15 ? "Should be shorter than 15" : false,
    ({ description, amount }) => description.indexOf(amount.toString())  ? "Should include amount" : false,
  ]
};

const store = new Vuex.Store({
  modules: {
    myForm: {
      namespaced: true
      store,
      getters,
      actions,
      mutations
    }
  }
});

register(store, "myForm", initialFields, validators);

Map to Components

Provided Getters

Getter name Returns
GetterTypes.ALL_FIELDS_VALID boolean whether all fields don’t have error
GetterTypes.FIELD_VALUES All fields as { [fieldName]: value }
GetterTypes.FIELD_ERRORS All errors as { [fieldName]: errorMessage }
GetterTypes.FIELD_EDITABILITIES All editable flags as { [fieldName]: editability }
GetterTypes.FIELD_DIRTINESSES All dirtiness flags as { [fieldName]: dirtiness }
GetterTypes.ANY_FIELD_CHANGED boolean whether all fields are not dirty

Provided Actions

Import ActionTypes from the module.

Action name Runs
ActionTypes.SET_FIELD Set value for a field, then runs validation if enabled
ActionTypes.SET_FIELDS_BULK Set values for fields at once, then make all dirtiness flags false
ActionTypes.RESET_FIELDS Reset values on field with initial values
ActionTypes.ENABLE_ALL_VALIDATIONS Enable interactive validation and run validations for all fields
ActionTypes.VALIDATE_FIELD_VALUE Validate specific field
ActionTypes.VALIDATE_FIELDS Validate all fields
ActionTypes.SET_FIELDS_EDITABILITY Set editability flag for a field, disabled field is not updated nor validated
ActionTypes.SET_FIELDS_PRISTINE Make all dirtiness flags false

Validators

You can pass validators when you initialize the module.

const validators = {
  amount: [/* validators for filling error against to amount */],
  description: [/* validators for filling error against to description */]
}

Each validator can take all fields values to run validation:

const validators = {
  amount: [
    ({ amount, description }) => /* return false or errorMessage */
  ]
}

Optionally, can take getters on the store which calls this module:

const validators = {
  description: [
    ({ description }, getters) => getters.getterOnStore && validationLogicIfGetterOnStoreIsTruthy(description)
  ]
}

And you can request “interactive validation” which valites every time dispatch(ActionTypes.SET_FIELD) is called

const validators = {
  amount: [
    [({ amount }, getters) => /* validator logic */, { instant: true }]
  ]
}

Provided Typings

You can import handy type/interface definitions from the module. The generic T in below expects fields type like:

interface FieldValues {
  amount: number;
  description: string;
}

getters[GetterTypes.FIELD_VALUES] returns values with following FieldValues interface.

See all typings

ValidatorTree<T>

As like ActionTree, MutationTree, you can receive type guards for Validators. By giving your fields’ type for Generics, validator can get more guards for each fields:

ValidatorTree

SetFieldAction<T>

It’s the type definition of the payload for dispatching ActionTypes.SET_FIELD, you can get type guard for your fields by giving Generics.

SetFieldAction

FieldValidationErrors<T>

Type for getters[GetterTypes.FIELD_ERRORS]

FieldEditabilities<T>

Type for getters[GetterTypes.FIELD_EDITABILITIES]

FieldDirtinesses<T>

Type for getters[GetterTypes.FIELD_DIRTINESSES]

Working Sample

Edit Sample: vuex-module-validatable-state

Registering to Vuex Store

const initialField = {
  amount: 0,
  description: null
};

const validators = {
  amount: [
    ({ amount }) => (!amount ? "Amount is required" : false),
    ({ amount }) => (amount <= 0 ? "Amount should be greater than 0" : false)
  ],
  description: [
    ({ amount, description }) =>
      amount > 1000 && !description
        ? "Description is required if amount is high"
        : false
  ]
};

const store = new Vuex.Store({
  modules: {
    ...theModule(initialField, validators)
  }
});

Mapping to Component

<template>
  <form>
    <div>
      <label for="amount">Amount (Required, Positive)</label>
      <input type="number" name="amount" v-model="amount">
      <span v-if="errors.amount">{{ errors.amount }}</span>
    </div>
    <div>
      <label for="description">Description (Required if amount is greater than 1000)</label>
      <textarea name="description" v-model="description"/>
      <span v-if="errors.description">{{ errors.description }}</span>
    </div>
    <button @click.prevent="submit">Validate and Submit</button>
  </form>
</template>

<script>
import { GetterTypes, ActionTypes } from "vuex-module-validatable-state";

export default {
  name: "App",
  computed: {
    amount: {
      get() {
        return this.$store.getters[GetterTypes.FIELD_VALUES].amount;
      },
      set(value) {
        this.$store.dispatch(ActionTypes.SET_FIELD_VALUE, {
          name: "amount",
          value
        });
      }
    },
    description: {
      get() {
        return this.$store.getters[GetterTypes.FIELD_VALUES].description;
      },
      set(value) {
        this.$store.dispatch(ActionTypes.SET_FIELD_VALUE, {
          name: "description",
          value
        });
      }
    },
    errors() {
      return this.$store.getters[GetterTypes.FIELD_ERRORS];
    }
  },
  methods: {
    submit() {
      this.$store.dispatch(ActionTypes.ENABLE_ALL_VALIDATIONS).then(() => {
        if (this.$store.getters[GetterTypes.ALL_FIELDS_VALID]) {
          alert("Form is valid, so now submitting!");
          this.$store.dispatch(ActionTypes.SET_FIELDS_PRISTINE);
        }
      });
    }
  }
};
</script>

Demo || Download


Thank for read!

#vuex #vuex-module #vue-form #vue-form-validate

What is GEEK

Buddha Community

Simple Vuex Module to Handle Form Fields and Validations.
Avav Smith

Avav Smith

1578555036

Simple Vuex Module to Handle Form Fields and Validations.

Simple Vuex module to handle form fields and validations.

vuex-module-validatable-state

You can build a view model for your form, which runs valdations easily. You just provide initial fields and validators to build the module, then map getters/actions to components.

Usage

Installation

$ npm i vuex-module-validatable-state

Register to core Vuex module

This module provides the function to return Vuex module as default. The function takes arguments:

  • Initial field set
  • Validators

A. Define directly

import validatableModule from "vuex-module-validatable-state";

const initialFields = {
  amount: null,
  description: "default text"
};

const validators = {
  amount: [
    ({ amount }) => amount === null ? "Require this" : false
  ],
  description: [
    ({ description }) => description.length > 15 ? "Should be shorter than 15" : false,
    ({ description, amount }) => description.indexOf(amount.toString())  ? "Should include amount" : false,
  ]
};

new Vuex.Store({
  modules: {
    myForm: {
      namespaced: true
      store,
      getters,
      actions,
      mutations,
      modules: {
        ...validatableModule(initialFields, validators) // <-- HERE
      }
    }
  }
});

B. Register to existing module

import { register } from "vuex-module-validatable-state";

const initialFields = {
  amount: null,
  description: "default text"
};

const validators = {
  amount: [
    ({ amount }) => amount === null ? "Require this" : false
  ],
  description: [
    ({ description }) => description.length > 15 ? "Should be shorter than 15" : false,
    ({ description, amount }) => description.indexOf(amount.toString())  ? "Should include amount" : false,
  ]
};

const store = new Vuex.Store({
  modules: {
    myForm: {
      namespaced: true
      store,
      getters,
      actions,
      mutations
    }
  }
});

register(store, "myForm", initialFields, validators);

Map to Components

Provided Getters

Getter name Returns
GetterTypes.ALL_FIELDS_VALID boolean whether all fields don’t have error
GetterTypes.FIELD_VALUES All fields as { [fieldName]: value }
GetterTypes.FIELD_ERRORS All errors as { [fieldName]: errorMessage }
GetterTypes.FIELD_EDITABILITIES All editable flags as { [fieldName]: editability }
GetterTypes.FIELD_DIRTINESSES All dirtiness flags as { [fieldName]: dirtiness }
GetterTypes.ANY_FIELD_CHANGED boolean whether all fields are not dirty

Provided Actions

Import ActionTypes from the module.

Action name Runs
ActionTypes.SET_FIELD Set value for a field, then runs validation if enabled
ActionTypes.SET_FIELDS_BULK Set values for fields at once, then make all dirtiness flags false
ActionTypes.RESET_FIELDS Reset values on field with initial values
ActionTypes.ENABLE_ALL_VALIDATIONS Enable interactive validation and run validations for all fields
ActionTypes.VALIDATE_FIELD_VALUE Validate specific field
ActionTypes.VALIDATE_FIELDS Validate all fields
ActionTypes.SET_FIELDS_EDITABILITY Set editability flag for a field, disabled field is not updated nor validated
ActionTypes.SET_FIELDS_PRISTINE Make all dirtiness flags false

Validators

You can pass validators when you initialize the module.

const validators = {
  amount: [/* validators for filling error against to amount */],
  description: [/* validators for filling error against to description */]
}

Each validator can take all fields values to run validation:

const validators = {
  amount: [
    ({ amount, description }) => /* return false or errorMessage */
  ]
}

Optionally, can take getters on the store which calls this module:

const validators = {
  description: [
    ({ description }, getters) => getters.getterOnStore && validationLogicIfGetterOnStoreIsTruthy(description)
  ]
}

And you can request “interactive validation” which valites every time dispatch(ActionTypes.SET_FIELD) is called

const validators = {
  amount: [
    [({ amount }, getters) => /* validator logic */, { instant: true }]
  ]
}

Provided Typings

You can import handy type/interface definitions from the module. The generic T in below expects fields type like:

interface FieldValues {
  amount: number;
  description: string;
}

getters[GetterTypes.FIELD_VALUES] returns values with following FieldValues interface.

See all typings

ValidatorTree<T>

As like ActionTree, MutationTree, you can receive type guards for Validators. By giving your fields’ type for Generics, validator can get more guards for each fields:

ValidatorTree

SetFieldAction<T>

It’s the type definition of the payload for dispatching ActionTypes.SET_FIELD, you can get type guard for your fields by giving Generics.

SetFieldAction

FieldValidationErrors<T>

Type for getters[GetterTypes.FIELD_ERRORS]

FieldEditabilities<T>

Type for getters[GetterTypes.FIELD_EDITABILITIES]

FieldDirtinesses<T>

Type for getters[GetterTypes.FIELD_DIRTINESSES]

Working Sample

Edit Sample: vuex-module-validatable-state

Registering to Vuex Store

const initialField = {
  amount: 0,
  description: null
};

const validators = {
  amount: [
    ({ amount }) => (!amount ? "Amount is required" : false),
    ({ amount }) => (amount <= 0 ? "Amount should be greater than 0" : false)
  ],
  description: [
    ({ amount, description }) =>
      amount > 1000 && !description
        ? "Description is required if amount is high"
        : false
  ]
};

const store = new Vuex.Store({
  modules: {
    ...theModule(initialField, validators)
  }
});

Mapping to Component

<template>
  <form>
    <div>
      <label for="amount">Amount (Required, Positive)</label>
      <input type="number" name="amount" v-model="amount">
      <span v-if="errors.amount">{{ errors.amount }}</span>
    </div>
    <div>
      <label for="description">Description (Required if amount is greater than 1000)</label>
      <textarea name="description" v-model="description"/>
      <span v-if="errors.description">{{ errors.description }}</span>
    </div>
    <button @click.prevent="submit">Validate and Submit</button>
  </form>
</template>

<script>
import { GetterTypes, ActionTypes } from "vuex-module-validatable-state";

export default {
  name: "App",
  computed: {
    amount: {
      get() {
        return this.$store.getters[GetterTypes.FIELD_VALUES].amount;
      },
      set(value) {
        this.$store.dispatch(ActionTypes.SET_FIELD_VALUE, {
          name: "amount",
          value
        });
      }
    },
    description: {
      get() {
        return this.$store.getters[GetterTypes.FIELD_VALUES].description;
      },
      set(value) {
        this.$store.dispatch(ActionTypes.SET_FIELD_VALUE, {
          name: "description",
          value
        });
      }
    },
    errors() {
      return this.$store.getters[GetterTypes.FIELD_ERRORS];
    }
  },
  methods: {
    submit() {
      this.$store.dispatch(ActionTypes.ENABLE_ALL_VALIDATIONS).then(() => {
        if (this.$store.getters[GetterTypes.ALL_FIELDS_VALID]) {
          alert("Form is valid, so now submitting!");
          this.$store.dispatch(ActionTypes.SET_FIELDS_PRISTINE);
        }
      });
    }
  }
};
</script>

Demo || Download


Thank for read!

#vuex #vuex-module #vue-form #vue-form-validate

Yogi Gurjar

1600308055

Laravel 8 Form Validation Tutorial

Laravel 8 form validation example. In this tutorial, i will show you how to submit form with validation in laravel 8.

And you will learn how to store form data in laravel 8. Also validate form data before store to db.

How to Validate Form Data in Laravel 8

  1. Step 1 – Install Laravel 8 Application
  2. Step 2 – Configuring Database using Env File
  3. Step 3 – Create Model & Migration File For Form
  4. Step 4 – Create Routes
  5. Step 5 – Creating Controller
  6. Step 6 – Create Blade File For Form
  7. Step 7 – Start Development Server
  8. Step 8 – Run Laravel 8 Form Validation App On Browser

https://laratutorials.com/laravel-8-form-validation-example-tutorial/

#laravel 8 form validation #laravel 8 form validation tutorial #laravel 8 form validation - google search #how to validate form data in laravel 8 #form validation in laravel 8

Laravel 8 Form Validation Example

In this tutorial we will see laravel 8 form validation example, form validation in laravel is very common functionalities and it is use in each and every website to validate form field.

Here, We will use has function in session to check error message in laravel 8. using this example you can check simple form validation as well as you can create your own custom validation in laravel 8.

Laravel 8 Form Validation Example

https://websolutionstuff.com/post/laravel-8-form-validation-example


Read Also : Laravel 8 CRUD Operation Example

https://websolutionstuff.com/post/laravel-8-crud-operation-example

#laravel 8 form validation example #form validation #how to validate form in laravel 8 #form validation in laravel #laravel #laravel8

I am Developer

1616903742

Form Validation using jQuery in PHP

Simple contact form submits in PHP MySQL with jQuery validation. In this tutorial, you will learn how to create a contact form in PHP, and how to submit form data into the MySQL database with jQuery validation.

This tutorial helps you step by step for creating or submit a contact forms in PHP MySQL DB with jQuery validation. And you can use this form for your business queries. The good thing is you can use this contact form in your web application too.

Contact Form Validation using jQuery in PHP

Just follow the few below steps and easily create and submit contacct form in PHP MySQL with jquery validation.

  • Step 1 - Create Table in Database
  • Step 2 - Create a Database Connection File
  • Step 3 - Create Contact Form in PHP

https://www.tutsmake.com/php-contact-form-with-jquery-validation-example/

#jquery validation in php registration form #simple jquery form validation example in php #jquery validation in php form

I am Developer

1608866530

Angular 11 Reactive Forms Validation Tutorial

Reactive form validation in Angular 11 app. In this tutorial, i will show you how to use reactive form validation in angular 11 app.

As well as, and you will learn how use reactive form validation in angular 11. And also use reactive form with formGroup for validation in angular 11 app.

Reactive Form Validation In Angular 11
Step 1 – Create New Angular App
Step 2 – Import Form Module
Step 3 – Add Code on View File
Step 4 – Use Component ts File
Step 5 – Start Angular App

https://www.tutsmake.com/angular-11-reactive-forms-validation-tutorial-example/

#reactive form validation in angular 11 #angular 11/10/9/8/7 reactive forms validation example #angular 11 form validation example