Vue Js Forms with laravel validation

Last update: May 17, 2022

vue-laravel-form

Vue Js Forms with laravel validation

npm

This package provides a Form class that can validation our forms with laravel backend validation logic. The class is meant to be used with a Laravel back end.

Install

You can install the package via yarn (or npm):

$ npm install @imritesh/form
$ yarn add @imritesh/form

By default, this package expects axios to be installed

$ yarn add axios

Usage

">
 <div class="form-group form-row is-invalid">
        <label for="form" class="col-md-3">Namelabel>
        <input
          type="text"
          id="form"
          class="form-control col-md-9"
          v-model="form.code"
          :class="{ 'is-invalid': form.errors.has('code') }"
        >
        <span
          class="invalid-feedback col-md-9 offset-3"
          v-if="form.errors.has('code')"
          v-text="form.errors.first('code')"
        >span>
div>
import Form from 'form-backend-validation';

// Instantiate a form class with some values
const form = new Form({
    field1: 'value 1',
    field2: 'value 2',
    person: {
        first_name: 'John',
        last_name: 'Doe',
    },
});

// A form can also be initiated with an array
const form = new Form(['field1', 'field2']);

// Submit the form, you can also use `.put`, `.patch` and `.delete`
form.post(anUrl)
   .then(response => ...)
   .catch(response => ...);

// Returns true if request is being executed
form.processing;

// If there were any validation errors, you easily access them

// Example error response (json)
{
    "errors": {
        "field1": ['Value is required'],
        "field2": ['Value is required']
    }
}

// Returns an object in which the keys are the field names
// and the values array with error message sent by the server
form.errors.all();

// Returns true if there were any error
form.errors.any();

// Returns true if there is an error for the given field name or object
form.errors.has(key);

// Returns the first error for the given field name
form.errors.first(key);

// Returns an array with errors for the given field name
form.errors.get(key);

// Shortcut for getting the errors for the given field name
form.getError(key);

// Clear all errors
form.errors.clear();

// Clear the error of the given field name or all errors on the given object
form.errors.clear(key);

// Returns an object containing fields based on the given array of field names
form.only(keys);

// Reset the values of the form to those passed to the constructor
form.reset();

// Set the values which should be used when calling reset()
form.setInitialValues();

// Populate a form after its instantiation, the populated fields won't override the initial fields
// Fields not present at instantiation will not be populated
const form = new Form({
    field1: '',
    field2: '',
});

form.populate({
    field1: 'foo',
    field2: 'bar',
});

Options

The Form class accepts a second options parameter.

const form = new Form({
    field1: 'value 1',
    field2: 'value 2',
}, {
    resetOnSuccess: false,
});

You can also pass options via a withOptions method (this example uses the create factory method.

const form = Form.create()
    .withOptions({ resetOnSuccess: false })
    .withData({
        field1: 'value 1',
        field2: 'value 2',
    });

resetOnSuccess: bool

Default: true. Set to false if you don't want the form to reset to its original values after a succesful submit.

GitHub

https://github.com/riteshsingh1/vue-laravel-form
You might also like...

Vue 3 Hooks for consuming, validating and managing Forms.

@casthub/form provides Vue 3 Hooks for consuming, validating and managing Forms.

Jun 17, 2022

Create reactive validations for forms in Vue

Create reactive validations for forms in Vue

Jan 25, 2020

👜 A Provider Component that encapsulate your forms and handle their states and validations.

vue-form-container A Provider Component that encapsulate your forms and handle their states and validations. Under the hood it uses valite, a light an

Sep 21, 2021

The easiest way to validate your forms without 3rd party packages

The easiest way to validate your forms without 3rd party packages

Easiest JS Validator It is a simple library ready to pull in into your project. Its goal is to provide an easy way to validate HTML forms without the

Jan 18, 2022

An easy way to validate forms using back end logic

An easy way to validate forms using back end logic

An easy way to validate forms using back end logic Wouldn't it be great if you could just use your back end to validate forms on the front end? This p

Jun 29, 2022

Model forms as an immutable data tree with validators and an explicit dirty/pristine state

Model your form as an immutable data tree with validators and an explicit dirty/pristine state.

Feb 14, 2022

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

May 7, 2019

✅ Form Validation for Vue.js

✅  Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Jul 4, 2022

RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

Feb 3, 2022
Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

May 29, 2021
A simple vue component that can wrap forms with validation and submit functionality.

vue form component A simple vue component that can wrap forms with validation and submit functionality. installation Using npm: $ npm i -save-dev vue-

Sep 18, 2019
Another validation form for the Vue. Validates input fields of multiple forms and displays errors

vue-coe-validator ✅ Another validation form for the Vue. Validates input fields of multiple forms and displays errors. Note: without any dependencies.

Jun 5, 2021
Asynchronous form handling and validation for VueJS forms

Asynchronous form handling and validation for VueJS forms

Sep 24, 2019
Vue props validation logic extracted for nested validation in object and arrays.

vue-props-validation Vue props validation logic extracted for nested validation in object and arrays. Install npm install vue-props-validation Usage Y

Feb 28, 2022
Form Validation in Vue3 with TypeScript along with vuelidate for the validation

Vue3 with typescript Form Validation in Vue3 with vuelidate library Node Version Used: v14.17.3 Library Used for the validation: Vuelidate 2 Demo Link

May 21, 2022
Sirius Validation - stand-alone JS library for data validation in Node and browsers.

SiriusJS Validation Sirius Validation is stand-alone JS library for data validation in Node and browsers. It offers: 23 build-in validation rules. The

Mar 24, 2020
Simple package to display error in vue from laravel validation

Laravel Vue Validator By bubbleflat.com This package allow to display errors from laravel validation rules ! This package needs vue-resource to work !

Sep 20, 2020
A simple way to handle Laravel back-end validation in Vue 2.
A simple way to handle Laravel back-end validation in Vue 2.

vform A simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark. Installation npm i axios vform Usage See the included ex

Jul 1, 2022
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api. (Form Api, Validator Api, Rules Api, Error Messages Api)

Jun 25, 2022