Comments (4)
@antemarkic Thanks for the suggestion. We did this in vue formulate by adding a data attribute data-is-valid
, and data-has-error
this is nice because it leaves the class system free/clear for people who want to write their own class solutions. We could pretty easily re-create that same tooling here in FormKit.
Letβs add it to the roadmap.
from formkit.
@antemarkic this is release-ready and will be published with 1.0.0-beta.3
. Here's an example of it running on beta.3:
https://formkit.link/cb85162e120c9de18e0298dbd8ca849e
Basic rules:
data-complete
True when these conditions are met:
Either:
- The input has validation rules
- The validation rules are all passing
- There are no errors on the input
Or: - The input has no validation rules
- The input has no errors
- The input is dirty and has a value
This is not intended to be used on forms/groups/lists but instead on individual inputs. Imagine placing a green checkbox next to each input when the user filled it out correctly β thats what these are for.
data-invalid
Added when the input has failing validation messages and those messages are being displayed !context.state.valid && context.state.validationVisible
data-errors
Added whenever explicitly set errors are on the input, either via a parent (like setErrors()
from the form), or directly via the :errors
prop.
from formkit.
Hi, @justin-schroeder.
While adding built-in attributes is a nice feature, If message uses the transition tag, the style changes ugly, is there any way to add a custom class?
I'm sorry, that's what I wanted to say yesterday. Now that I've handled the transition hook manually, it would be nice to have a built-in API
from formkit.
You can modify this behavior on your own β although I'm still not exactly sure what behavior you're looking to modify. Perhaps you could make a playground at https://formkit.com/playground with an example of the transition you are attempting and what you are wanting to achieve and then I can assist from there. Thanks @aegorx!
from formkit.
Related Issues (20)
- Select element remains in placeholder state when option selected using option groups with placeholder set
- valid state only correctly changes when other inputs are present HOT 1
- Repeater sortability not functioning properly HOT 1
- It is impossible to add a new tag if there is already a tag in the options with the same root or a part that matches the text of the new tag in taglist field HOT 2
- Clicking on this area will not trigger the Select menu
- formkit/i18n: Validation rule's message is incorrect when using array syntax for the validation
- `autocomplete`: Async options not filterable HOT 5
- Mask input and autocomplete failing validation HOT 1
- Errors don't show with more groups HOT 3
- Repeater should consistently render when the default slot is empty HOT 1
- Mixed order of identical items in dynamic list
- <FormKit type="mask"> renders <input type="mask"> HOT 3
- datetime-local field with initial value resets itself in firefox after the entry of a 0
- FormKit datepicker component: enter key submits the form and display the calendar popup
- `childRemoved` event not triggered for type list HOT 1
- setting Buddist locale breaks datepicker HOT 2
- Changing `datepicker` value makes it to autofocus on Safari
- Pro Inputs - Potential Memory Leak Issue HOT 1
- blur() doesn't remove focused attributes such as highlighted border and text inputs remain focused.
- icon-click does not trigger on keyboard action
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from formkit.