Vue form components with server-side validation in mind

Overview

Formvuelar

Vue form components with server side validation in mind

Formvuelar basic form

About

Build Status

FormVuelar is a set of predefined vue form components which are designed to automatically display errors coming back from your backend. It works out of the box with the error message bag that is returned by Laravel when submitting an ajax form.

Examples

Give it a try!

Documentation

Full Documentation

Features

  • Works out of the box with Laravel
  • Axios integration
  • Select with search and remote source option
  • Nested Checkboxes
  • File upload support including progress indication
  • Image upload with image preview
  • Dropzone with image preview (inspired by FilePond)
  • Display validation error messages from error response
  • Supports Tree Shaking (adds only used components to your js bundle)

Getting Started

npm install formvuelar --save

TODO

- Test coverage

Credits

HelpSpace.com

License

Released under the MIT License.

Comments
  • Headers

    Headers

    Hi Janis,

    Thanks for the great package! I'm having a bit of an issue though when submitting the form I need a Bearer token header to authenticate the request. I'm currently adding this via a axios interceptor but after some testing, this section of code below seems to not respect any headers already set. I'm not sure of the best way to address this as I would just do a pull request for you?

    headers: this.multipart ? { 'Content-Type': 'multipart/form-data' } : {}, Barry

    opened by Barrykilby 13
  • Use different axios instance?

    Use different axios instance?

    I cant find a way to use a custom instance of axios?

    It will be nice to use it so you can use the interceptors, a baseUrl, default headers and other stuff.

    I implemented it like this but don't know if its the right way

    ...
    
    let method = this.multipart && (this.method == 'patch' || this.method == 'put') ? 'post' : this.method
    
    // this chage
    let _axios = this.axios || this.$http || axios
    
    _axios({
     method: method,
     url: this.url,
    
    ...
    
    opened by dnldsht 3
  • Errors

    Errors

    Hi. first that all thanks for the plugin.

    i'm have a problem with this function hasErrors:

    TypeError: **_vm.$parent.hasErrors** is not a function at Proxy.FvlSearchSelectvue_type_template_id_18b3ecd3_render (app.js:32391) at VueComponent.Vue._render (app.js:146950) at VueComponent.updateComponent (app.js:147466) at Watcher.get (app.js:147877) at new Watcher (app.js:147866) at mountComponent (app.js:147473) at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:152443) at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:155328) at init (app.js:146530) at createComponent (app.js:149372)

    just import a component FvlSearchSelect

    import { FvlSearchSelect } from "formvuelar";

    <FvlSearchSelect :option-key="'id'" :option-value="'title'" :searchKeys="['id', 'title']" :name="'tags'" :options="[{title:'titulo1',id:15},{title:'titulo2',id:1}]"/>

    how can i fix this issue?

    opened by nikoz84 3
  • FvlForm.vue

    FvlForm.vue

    Hi Janis,

    I have been having an issue receiving files uploaded via FvlMultiFile.vue (not tested dropzone), server-side I'm not receiving the files just a string of File, File, File.

    From what I can see:

    Object.keys(rawData).map(e => { formData.append(e, rawData[e]) })

    Is not picking up on the fact there are multiple files in the array representing the multiple files.

    Barry

    bug 
    opened by Barrykilby 3
  • FvlSelect.vue

    FvlSelect.vue

    Hi Janis,

    I was having issues with the select box updating my value or even rendering with the supplied value, after a little bit of digging it seems that FvlSelect is missing the value prop and line 16 should read:

    @change="$emit('update:value', $event.target.value); $parent.dirty(name);"

    To correctly emit the value/event?

    Barry

    opened by Barrykilby 2
  • Bump loader-utils from 2.0.2 to 2.0.4

    Bump loader-utils from 2.0.2 to 2.0.4

    Bumps loader-utils from 2.0.2 to 2.0.4.

    Release notes

    Sourced from loader-utils's releases.

    v2.0.4

    2.0.4 (2022-11-11)

    Bug Fixes

    v2.0.3

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Changelog

    Sourced from loader-utils's changelog.

    2.0.4 (2022-11-11)

    Bug Fixes

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump loader-utils from 2.0.2 to 2.0.3

    Bump loader-utils from 2.0.2 to 2.0.3

    Bumps loader-utils from 2.0.2 to 2.0.3.

    Release notes

    Sourced from loader-utils's releases.

    v2.0.3

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Changelog

    Sourced from loader-utils's changelog.

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump vite from 2.9.5 to 2.9.13

    Bump vite from 2.9.5 to 2.9.13

    Bumps vite from 2.9.5 to 2.9.13.

    Changelog

    Sourced from vite's changelog.

    2.9.13 (2022-06-27)

    2.9.12 (2022-06-10)

    • fix: outdated optimized dep removed from module graph (#8534) (c0d6c60), closes #8534

    2.9.11 (2022-06-10)

    2.9.10 (2022-06-06)

    2.9.9 (2022-05-11)

    2.9.8 (2022-05-04)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump terser from 5.12.1 to 5.14.2

    Bump terser from 5.12.1 to 5.14.2

    Bumps terser from 5.12.1 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump url-parse from 1.5.3 to 1.5.10

    Bump url-parse from 1.5.3 to 1.5.10

    Bumps url-parse from 1.5.3 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump url-parse from 1.5.3 to 1.5.7

    Bump url-parse from 1.5.3 to 1.5.7

    Bumps url-parse from 1.5.3 to 1.5.7.

    Commits
    • 8b3f5f2 1.5.7
    • ef45a13 [fix] Readd the empty userinfo to url.href (#226)
    • 88df234 [doc] Add soft deprecation notice
    • 78e9f2f [security] Fix nits
    • e6fa434 [security] Add credits for incorrect handling of userinfo vulnerability
    • 4c9fa23 1.5.6
    • 7b0b8a6 Merge pull request #223 from unshiftio/fix/at-sign-handling-in-userinfo
    • e4a5807 1.5.5
    • 193b44b [minor] Simplify whitespace regex
    • 319851b [fix] Remove CR, HT, and LF
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • [QUESTION]Will there be a migration to Vue3 in the future

    [QUESTION]Will there be a migration to Vue3 in the future

    I came across this wonderful library while looking for form components for a project I'm doing in Vue3 and was wondering if there will be a migration for vue3 in the future.

    help wanted 
    opened by AkposCodex 1
  • Date Picker component not documented

    Date Picker component not documented

    Hi,

    Thank you for the great component package! I am just wondering if the docs (https://formvuelar.netlify.com/) will be updated to include a little more information about the Date Picker and its api surface?

    I understand it is based off flatpickr library and I have been doing some tweaking around to get some desired results but it would be great to be following the best practices of your package like I have been with the other components - in particular at the moment I am looking for the best way to change the predetermined date ranges on the left hand side of the extended date picker.

    Any help would be greatly appreciated!

    help wanted 
    opened by Manaf-Ibrahim 1
  • Allow auto resize for FvlTextarea.vue

    Allow auto resize for FvlTextarea.vue

    Hey, first of all, i love your library. Very awesome work, thanks.

    I noticed one thing that would be very useful. Maybe you could add a property to the textarea that allows for auto resizing the test area while people type in it. I am sure a lot of people would find this useful.

    Thanks so much! Leo

    enhancement 
    opened by leo-unglaub 1
  • [IDEA] @keydown

    [IDEA] @keydown

    @janiskelemen thanks for making those nice components

    I would like to see support of Keydown events:

    `<fvl-textarea @keydown="func()"></>

    For quick form submissions

    enhancement 
    opened by juliankoehn 0
Releases(v1.8.5)
Owner
Janis Kelemen
I’m a full stack web developer and Co-Founder of helpspace.io
Janis Kelemen
Vue data validation rules, very much inspired from Laravel validation

A Vue plugin that provides out-of-the-box data validation rules, very much inspired from Laravel validation system. Installation npm i @primitivesocia

Primitive. 15 Apr 13, 2022
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

Rubén Valseca 21 Feb 28, 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

Adrian Miu 1 Mar 24, 2020
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.

Mohammed Al-Mahdawi 1 May 7, 2019
✅ 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

Abdelrahman Awad 9.5k Jan 1, 2023
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

Kristijan Sedlak 81 Nov 24, 2022
Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform Vue.js 2 form component that integrates jQuery Validation and Axios. Install Yarn yarn add vue-vform --dev NPM npm install vue-vform --save-

Jose Quintana 15 Nov 24, 2022
Form validation for Vue.js 2.2+

vue-form Form validation for Vue.js 2.2+ Install Available through npm as vue-form. import VueForm from 'vue-form'; // or var VueForm = require('vue-f

null 617 Dec 18, 2022
Vue composition function for Form Validation

Form Validation for Vue 3 Vue composition function for Form Validation with async rules. ?? Written in TypeScript ?? Dynamic Form support ?? Light wei

null 18 May 11, 2022
Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

Oleksii Dubinin 0 Jan 14, 2022
A Vue.js directive for sending data from form and primitive validation

Vue Form Send A Vue.js directive for sending data from form and primitive validation inputs Installation npm i --save-dev vue-form-send import VueForm

Aleksey Pleshkov 3 Apr 13, 2022
Simple Vue.js form validation library

Simple Vue.js form validation library

null 0 Mar 1, 2020
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)

Zak Horton 41 Jul 10, 2022
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.

Vinicius Azevedo 13 Jun 5, 2021
Flexible Vue.js form validation directive

Vue form validator A Vue.js directive for form validation Installation npm instal vue-smart-validator --save Getting Started In your scirpt entry poi

mlxiao93 7 Nov 20, 2018
Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Edward S. Ramos 0 Feb 15, 2021
Deadly simple form validation for Vue.js

vue-form-validator Deadly simple form validation for Vue.js. Features: Built in data types, including email, number, domain, url, etc. Customizable va

Wenbo 10 Aug 28, 2018
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 -

Metin Seylan 58 Aug 23, 2022
Form validation for Vue in composition functions

Form validation for Vue in composition functions

Vanilla IceCream 3 Dec 5, 2022