wearebraid / vue-formulate Goto Github PK
View Code? Open in Web Editor NEW⚡️ The easiest way to build forms with Vue.
Home Page: https://vueformulate.com
License: MIT License
⚡️ The easiest way to build forms with Vue.
Home Page: https://vueformulate.com
License: MIT License
Describe the bug
Validation runs are only checked when the user changes field values. This breaks the confirm validation rules.
To Reproduce
Docs Example
Add a New password e.g "123"
Add matching password to Confirm password - Validation passes
Change New Password & Submit. The form will pass validation even though the values are not the same any more.
Reproduction
See docs example
Expected behavior
Validation should fail if the values are not the same.
Describe the new feature you'd like
In an address form with zipcode and country we often have strict rules for the zipcode based on the country. I created a custom rule for both the zipcode and the country field using the getFormValues but this is not enough for all situations.
When the zipcode validation fails due to the wrong country selected and the user changes the country for which the zipcode does match, the zipcode validation message remains as the zipcode field is not validated at that point.
Even more so, blurring from the zipcode field (without changing it) also does not revalidate and the validation message remains.
The requested feature would be the option to validate another field when the current field is changed.
What percentage of vue-formulate users would benefit?
I am not sure, but when working with addresses I think this would benefit a lot of users.
Another one
Describe the new feature you'd like
autocomplete prop so browsers like chrome can automatically fill in the forms
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
What percentage of vue-formulate users would benefit?
80%
Describe the new feature you'd like
Proposed solution for allowing classes to be overriden on any sub-element of vue-formulate:
The default would be something like:
Vue.use(VueFormulate, {
classmap: context => ({
"outer": `formulate-input`,
"outer-wrapper": `formulate-input-wrapper`,
"element-wrapper": `formulate-input-element formulate-input-element--${context.type}`,
"element": '',
"help": "formulate-input-help",
"errors": "formulate-input-errors",
"error": "formulate-input-error"
})
}
The idea is that classMap function would be defined globally for all inputs, and then each sub-type could override it, and then as granular as individual input fields could also override each:
<FormulateInput
type="text"
classmap-element="form-input block w-full sm:text-sm sm:leading-5"
/>
The idea is that the above solution would allow a developer to setup their own fields using a class-based ui framework and handle 90% of a project's form styles globally for all FormulateInput
elements, and then on a case by case basis easily override the styles on a per-element basis, and lastly scoped slots as a nuclear option.
I'll reiterate the goal of Vue Formulate is to make high quality form building fast and easy, so I we want to provide that 90% solution as painlessly as possible. 90% of inputs shouldn't require any additional configuration, scoped slot usage, etc.
What percentage of vue-formulate users would benefit?
Probably about 20%
I'm looking for feedback from users of frameworks like Tailwind, Tachyons, or Bootstrap.
Describe the new feature you'd like
Be able to generate the form with an openapi v3+ schema
What percentage of vue-formulate users would benefit?
Everyone that uses OpenAPI
I am trying to raise an error as soon as the input value is different then "Rednas"
Tried:
data.name => works but of course if the name is set to name and only when in async because otherwise data is not initialized yet
@input="emit = $emit" => returns a function?
Describe the bug
While reading the documentation about how to add a slider I noticed that the horizontal line of the slider isn't visible when you are using Firefox.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expect to see a horizontal line (like in Google Chrome/Chromium 80).
Screenshots
Firefox 75
Chromium 80
Device information:
Describe the new feature you'd like
It's not uncommon for a field to be dependent on another field's value. This is no-problem using Vue's computed properties; however, if I need to have a repeatable group of such fields, there isn't a way to for me to use the current group's model as context for the values of my dropdown.
For example, consider a form where I can order coffees. I would have a grouped input for selecting the beverage type and it's options. If I have a selection for "Cream?" with the values Yes and No, I might then want an input for "How much cream?" to appear when the user selects "Yes".
Perhaps I'm missing something, but it doesn't seem like there's an easy way to do this right now.
Using VueFormGenerator, you were able to pass a function into the "options" parameter of a Select field. The first argument of that function would be the current state of that particular group's model. Additionally, fields have a "visible" attribute that would also accept a boolean or similar callback. This gives you the ability to contextually hide a field.
What percentage of vue-formulate users would benefit?
70%
Describe the new feature you'd like
While building a form recently with Formulate, I found myself clearing the input (a password reset form) after I received a successful response from the server. When I set the value to an empty string, I noticed that the validation rules are running again. Does Formulate expose some helpers or way to clear a value (or values) without triggering validations? I've attached a screenshot of the issue.
What percentage of vue-formulate users would benefit?
Unknown, but I assume others will ask how to clear inputs without triggering validations eventually.
Similar to something like Laravel's bail
. There are a few ways we could go about implementing it from a syntax standpoint. Laravel has chosen (and we've largely mirrored) to use rules, or almost pseudo-rules to allow modification of the validation "runtime" examples: bail
and sometimes
required|bail|between:0,100
This keeps the syntax all familiar – although I've always found these "modifiers" a little opaque to read. Are they sequential? global (they are global), etc.
I think we could keep this mirroring, but I wonder if there's any appetite for a modifier on a rule. Possible syntax:
validation="^required|between:0,100"
In this case, the rest of the validation rules would run only if required passes, but if it does the rest of the rules would run even if one of them fails (not just first failure like bail
).
Whenever validation occurs, it would be nice to emit validation
with the validationErrors array in the case of inputs or {inputName: []}
for Forms. This would allow easily implementing your own handling of errors.
If that sounds good I could start on it, my current idea would be to do it in .then(errorMessages => { this.validationErrors = errorMessages })
of FormulateInput.performValidation
Hello! First of all, its a really cool project you’ve got here. It’s something I’ve been trying to do myself for a really long time with little success.
Is it possible to do server side validation and pass in the error messages for each field after form submission?
Hello Vue Formulate developers,
I have the feeling that I miss something: I created a form with Vue Formulate and everything works fine except that if I click on submit button nothing happens.
`
<formulate-form
action="https://api.staticforms.xyz/submit"
method="post"
>
<formulate-input
type="hidden"
name="accessKey"
value="[secret key]"
>
</formulate-input>
<formulate-input
type="hidden"
name="redirectTo"
value="[private address]"
>
</formulate-input>
<formulate-input
id="honeypot"
type="text"
name="honeypot"
>
</formulate-input>
<formulate-input
type="text"
name="name"
label="Naam"
placeholder="Voer hier uw voor- en achternaam in"
validation="required|max:50,length"
:validation-messages="{
required: 'Voer hier uw voor- en achternaam in.',
max: 'De voor- en achternaam mogen samen niet langer zijn dan 50 tekens.'
}"
>
</formulate-input>
<formulate-input
type="email"
name="email"
label="E-mailadres"
placeholder="Voer hier uw e-mailadres in"
validation="email|max:50,length"
:validation-messages="{
email: 'Voer een geldig e-mailadres in.',
max: 'Het e-mailadres mag niet langer zijn dan 50 karakters.'
}"
>
</formulate-input>
<formulate-input
type="textarea"
name="message"
label="Bericht"
placeholder="Voer hier uw bericht in"
validation="required|max:1000,length"
:validation-messages="{
required: 'Voer hier uw bericht in.',
max: 'Het bericht mag niet langer zijn dan 1000 karakters.'
}"
>
</formulate-input>
<formulate-input
type="submit"
name="Verzenden"
>
</formulate-input>
</formulate-form>
For privacy concerns I removed the access key and private address in the code.
Is there something missing in the above code? Is there something that I should add?
I guess the action attribute should just work?
Yooo, i got a new one :P
Describe the new feature you'd like
Passing tab order as a prop
What percentage of vue-formulate users would benefit?
40%
Describe the new feature you'd like
Currently vue-formulate uses scoped slots internally, but this API is not public. It would be great to have an optionally public API (well documented) for using it.
<FormulateInput>
<template #label="{ label }">
<label>I want my own label code!</label>
</template>
</FormulateInput>
So technically the above code works in 2.0.0
already, but its not fully fleshed out and does not have access to the entire context object, we should give each slot access to the same internal context object which holds all the information about the component.
What percentage of vue-formulate users would benefit?
I hope not more than 40% because while scoped slots are super powerful, they require a much more in-depth understanding fo the inner-workings of vue-formulate
and the goal is for this to be super easy to use. But we do need to be able to handle more complex use cases.
Describe the bug
The file uploader does display errors when an incorrect mime type file is provided based on the field's validation rules.
To Reproduce
Steps to reproduce the behavior:
Describe the new feature you'd like
A select all toggle for checkboxes with options.
What percentage of vue-formulate users would benefit?
80%
First of all, I really want to thank you all for coming up with this,
I deeply appreciate it is saving me a lot of hours
Just 4 days ago I stumble on this and I am loving it,
I seek help to understand form field Select :options,
My data is coming from database, as an Object/Array/JSON
everything shows up as the first option only,
Illuminate\Support\Collection {#1647 ▼ #items: array:3 [▼ 1 => "Restaurant" 2 => "Social Media" 3 => "Shopping" ] }
JSON
"{"1":"Restaurant","2":"Social Media","3":"Shopping"}"
Please appreciate any heads up or better way to do it
Describe the new feature you'd like
A label slot so we can add our own label format.
or
Label hover tooltips with slot possibility (so we can add our own icons where we can hover over.)
What percentage of vue-formulate users would benefit?
80%
I'm putting together some homepage demos on vueformulate.com which is using @braid/vue-formulate
at version 2.0.4
and in the process have noticed that the "checkbox" and "radio" input types do not validate as I expect.
When creating an input with type of checkbox
the value is present without an interaction as an empty array rather than the key not existing in the returned object all.
My expectation would be to have it dropped from the modeled data entirely. Additionally, even though the demo has a validation rule of required|min:1
it is not failing the check when I submit the form.
A similar issue exists when the input is set to radio
. The Initial value without any user interaction to the form appears to be the last option in the array of choices.
This means that it also does not fail the validation rule check because there's a mapped value by default in the v-modeled values
object.
To address this behavior we should add something like remove-behavior="remove|keep"
on field and form elements to remove or keep a field's value if it is removed from a form (using v-if
or the like)
Describe the new feature you'd like
I have a large form with up to 20 fields. Some fields are required, some are not. When I hit submit, nothing happens when there are fields that do not pass the validation. However, my form is too large to see the validation messages below these individual fields.
I would like to be able to add a general message below the form to show there are validation issues for the user to fix before the form can be submitted.
I added the component below my submit button and expected that with showValidationErrors this would be automatic but alas.
Question: is this possible in the current version?
What percentage of vue-formulate users would benefit?
80%
The documentation says:
While technically Vue Formulate does support hidden input fields, the use case is pretty minimal since you can easily inject your own "hidden" values into submitted data with your a form submission.
But when I look at that page I can't find something that answers the question (or I don't understand the code/text very well).
I guess the code for a hidden input element is:
<formulate-input
type="hidden"
name="secretInputField">
</formulate-input>
I'm I correct?
To address this, we should add something like a new group
type that allows nesting of fields. Example API:
<FormulateInput
type="group"
name="users"
repeatable="true"
limit="2"
#default="{ groupState }"
>
<FormulateInput
name="username"
/>
<FormulateInput
value="password"
type="password"
/>
</FormulateInput>
The modeled data output for the above would be something like:
{
users: [
{
username: 'jane',
password: 'secret'
},
{
username: 'jill',
password: 'shhh'
}
]
Add something like this for number inputs:
<input type=”text” inputmode=”numeric” pattern="[0-9]*">
It would help with accessibility, for since the buttons on mobile will be bigger and this pattern is being recognized by (https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)
I'm trying to enable/disable submit buttons depending on the validation status of other fields in the form. How might I do this? i.e. which property or chain of properties can I access to determine the validation status?
Describe the new feature you'd like
Right now, you can't generate a form from a schema-like json file with several fields on the same line, as they are full width by default. Fields on the same line have to be put in a flex div by hand.
Not sure if this could be achieved, but maybe fields could by default by in a flex div and have a "group" (e.g. group=namefields) and "width" (1/3, 1/2, etc.) attribute so they could automagically be assembled into a more complex layout.
Thanks in advance for the consideration.
What percentage of vue-formulate users would benefit?
80% ?
Describe the new feature you'd like
Many times we have to mask input values for better UX.
VueFormulate already have really good features and be able to mask a value is the only missing feature that makes me add an extra dependency to handle my forms.
Today I use vue-the-mask
(https://github.com/vuejs-tips/vue-the-mask) but it seen dead, doesn't have any activity from the maintainer and a lot of good contributors PR to get merged.
What percentage of vue-formulate users would benefit?
80%
Let's talk about it.
Describe the new feature you'd like
I would like to be able to listen for keypress events on a FormulateInput component. Perhaps I'm doing something wrong, but
<FormulateInput
type="text"
placeholder="Test"
v-model="test"
@keyup.tab="someFunction"
/>
does not trigger someFunction
when the tab key is pressed. This is not limited to this key, I have tried other keys as well.
What percentage of vue-formulate users would benefit?
I don't know if this is a common use case, but in my case, I want to be able to trigger the creation of a new item when tab is pressed.
I worked through the documentation, and I have the following questions (in case I've missed something in the docs):
Field Groups: Is there an option to group fields together on a form? E.g. on a user profile form having a section for person details (fields for name, last name, etc), a section for profile (fields for user name, avatar image), section with contact details (fields for phone, email, etc)
Theming: the theming section in the docs mention that you can style the field elements using SCSS variables. Is it possible to use components from another UI library, e.g. Vue Ant Design?
When using a FormulateForm with FormulateInput type image, I wish to keep the uploader prop, so I can use it for Parse server File Upload.
Example:
<template>
<div>
<FormulateForm
class="login-form"
@submit="setImage"
>
<FormulateInput
type="text"
name="name"
label="Image Name"
placeholder="image name..."
validation="required"
/>
<FormulateInput
type="image"
name="image"
label="Select an image to upload"
help="Select a png, jpg or gif to upload."
validation="mime:image/jpeg,image/png,image/gif"
upload-behavior="delayed"
:uploader="uploadImage"
/>
<FormulateInput
type="submit"
label="Add an Image"
/>
</FormulateForm>
</div>
</template>
<script>
export default {
data() {
return {
upImgProps: {}
}
},
methods: {
setImage(data) {
this.$store.dispatch('a_uploadImage', {data, ...this.upImgProps});
},
uploadImage(file, progress, error, option) {
this.upImgProps = {file, progress, error, option};
}
}
}
</script>
As shown in code above, I can accomplish this by attaching 2 methods. The question is, is there a simpler way that i use the submit event, at time same time access the image' uploader props (file, progress ... etc)?
So first of: Great Plugin, absolute time saver since you don't have to write the same logic over and over again! I love it!
Anyhow, I found a bug with the radio buttons: If a default value is set, you can click the label to select an option, but not the icon. Also this sometimes just seems to happen at random. Needless to say, most users would push the radio button and not the label.
Reproduction
Go to this page in the docs: https://vueformulate.com/guide/inputs/box/#radio
Here it doesn't work to click the circle icons to select an option
Go to this page in the docs: https://vueformulate.com/guide/#double-binding
Here clicking on the circle icon works
Expected behavior
Consistently working radio icons
Device information:
Describe the new feature you'd like
A form I'm trying to make has many options that change the form, like:
<label><input type="checkbox">Show Input></label>
<label>Only shown when above is checked<input type="text"></label>
Is there a way to do that or is that a planned feature? I can certainly do that with v-if
sprinkled everywhere and that might be just as clear, but before I do that I was wondering if there was a better recommendation.
I will also be creating the form with a JSON object, so I'm planning on using the https://vueformulate.com/guide/forms/#generating-forms method and probably just adding additional info about what fields are dependent on others.
What percentage of vue-formulate users would benefit?
I have no idea. It's a common case in the apps that I build.
Describe the bug
Initialising FormulateInput type=select with options set to an empty array causes a Range Error
Error in render: "RangeError: Maximum call stack size exceeded"
To Reproduce
Open page view console.
Expected behavior
Passing an empty Array should should render the placeholder value in the select element. The same as passing an empty Object.
Device information:
Any browser
Describe the bug
When running my Vue x Nuxt.js application on Internet Explorer 11, I get the following error:
Translation: Multiple definitions of a property not allowed in strict mode
I have tried desperately to fix this issue myself, but I'm not that deep into programming yet, unfortunately.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Running everything without the error which is causing the entire Nuxt application to crash
Screenshots
If applicable, add screenshots to help explain your problem.
When trying to trace back where the multiple definitions have been defined, I came across this line
I strongly believe this is causing the error..
Device information:
Describe the new feature you'd like
In my case I'm doing a form wizard, and when navigating from a step to another I can't go back and started again because some field, that aren't available anymore (destroyed) are still register and blocking the submit event.
What percentage of vue-formulate users would benefit?
50%
Here I see how the input register itself on form
https://github.com/wearebraid/vue-formulate/blob/master/src/FormulateInput.vue#L244
What about implement a deregister
method on FormulateForm called from FormulateInput when destroyed?
Thanks!
Currently FormulateForm will show errors on the blur event as well as on submitting the form with errors. I was wondering if it would be/is possible to set error-behavior such that errors are only shown when submitting a FormulateForm.
Describe the new feature you'd like
We need to set custom css classes on the different html elements. This could be most likely get done by adding options.
What percentage of vue-formulate users would benefit?
100%
Describe the bug
Whenever I try to add validation to an input, I get an error
To Reproduce
Steps to reproduce the behavior:
<FormulateInput
type="email"
name="email"
label="What is your email address"
help="Where should we contact you?"
validation="required|email"
/>
Uncaught (in promise) TypeError: t.split is not a function
I'm running VueJS 2 with Typescript and Webpack using Single Files.
Expected behavior
Simple working example.
Device information:
As mentioned on #21, we should move to language tags while it's early.
If this project gets big, using two letter language identifications (i.e. en
fr
pt
) would generate regional issues. We should move to en-US
en-UK
pt-BR
pt-PT
.
In English some words can be a little different...
en-US | en-UK |
---|---|
meter | metre |
fiber | fibre |
center | centre |
... but in Portuguese the sentence can change a lot.
pt-BR | pt-PT |
---|---|
Me dá um presente? | Dá-me um presente? |
Vou na escola hoje. | Vou à escola hoje. |
Estou preparando o almoço. | Estou a preparar o almoço. |
Description
Followed the Getting Started but for some reason I am not getting any style.
Steps to reproduce
<template>
<div>
<!-- T01 Text -->
<FormulateInput v-model="name" type="text" label="What is your name?" />
<strong
>Hello <em>{{ name }}</em
>!</strong
>
<!-- T02 Email -->
<FormulateInput
type="email"
name="email"
validation="required|email"
label="What is your email address?"
/>
<!-- T03 Checkbox -->
<FormulateInput
v-model="data"
type="checkbox"
label="Which animals make good pets?"
:options="{ dog: 'Dogs', alligators: 'Alligators', cat: 'Cats' }"
/>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Rednas',
data: undefined
}
}
}
</script>
Actual behaviour in chrome with no errors/warnings in the console
Expected behavior like in the Getting Started
Am I missing a step somewhere or is not compatible with nuxt somehow?
Describe the new feature you'd like
Add the ability to add more files or images to a file input, after files have already been selected. Currently the only option is to remove all files before adding new ones. The best option would probably be to add a prop to allow for adding files/images.
This feature would eliminate the need to re-select all files/images if you missed some on the first time, reduce the amount of uploads (upload-behaviour="live"
) and gives to opportunity to add files on fields with pre-filled files/images.
This option should only be available to inputs with the multiple
prop.
What percentage of vue-formulate users would benefit?
80%
Any plans to support TypeScript?
I see typescript in dependencies:
https://github.com/wearebraid/vue-formulate/blob/master/package.json#L80
But don't see any declarations 🙂
P.S. Formulate looks like a great solution for building forms. Well documented, customizable, friendly API... I totally want to try it in my next application.
Describe the bug
Whilst trying to deploy to Netlify we get the following error:
4:52:53 PM: error @braid/[email protected]: The engine "node" is incompatible with this module. Expected version ">=11". Got "10.20.1"
4:52:53 PM: error Found incompatible module.
Reproduction
Your package.json is set as the following:
"engines": {
"node": ">=11"
},
Expected behavior
To be able to deploy on node versions less than 11 as it works fine on my local machine using node v10.18.1.
Is there a reason the engine requirement is 11+?
Describe the bug
Calling function in Input Button not working.
To Reproduce
<FormulateInput type="button" label="Show Dialog" v-on:click="showdialog()" />
My Function
showdialog () { this.showformDialog = true }
Hello,
Thanks for creating this library. Looks refreshing. I did some testing and found some accessibility problems with your current structure:
<label>
is disabled. A label is the only way for users of assistive technology to know what input they should enter; it should, therefore, be a required propI’m a maintainer of an inclusive component library (https://github.com/tournantdev/ui/). This is our input component, in which these points are handled. If you like, I can help out with solving these issues. :)
And a mostly unrelated question: Is it possible to conditionally display validation messages? E.g. if an e-mail is required can I only show the required message and not that is the wrong format?
Best wishes,
Oscar
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.