Comments (6)
I was able to figure out a good solution with the current API. I just created a form field called emailError
and used the FormField
utility to make a custom hidden input with some async logic. Here's my quick and dirty example:
import { Form, Text, FormField } from 'react-form';
let lastQuery = {email: ''};
function CustomInput ({field, query, method, ...rest}) {
return (
<FormField field={field}>
{({ setValue, getValue, setTouched }) => {
if (query.email !== lastQuery.email) {
lastQuery = query;
setTimeout(() => {
if (query.email === '[email protected]') {
setValue('That email is unavailable');
} else {
setValue('');
}
}, 500);
}
return (
<input
type='hidden'
value={getValue()}
/>
);
}}
</FormField>
);
}
ReactDOM.render(
<div>
<div className='container react-form'>
<h2>Login - React-Form</h2>
<Form
onSubmit={(values) => {
console.log('Success!', values);
}}
defaultValues={{
email: '',
password: '',
emailError: ''
}}
validate={({ email, password, emailError }) => {
let validations = {
email: !email ? 'E-mail address is required' : emailError || null,
password: !password ? 'Password is required' : null
};
return validations;
}}
>
{(props) => {
let {values, submitForm} = props;
let query = {
email: values.email
};
return (
<form onSubmit={submitForm} className='auth-component-form'>
<Text field='email' placeholder='e-mail address' />
<Text field='password' type='password' placeholder='password' />
<CustomInput field='emailError' query={query} />
<button type='submit'>Submit</button>
</form>
);
}}
</Form>
</div>
</div>
);
from form.
Interesting approach. Would it be valuable if react-form supported async lifecycle methods? This would be a lot of work, but it could be extremely useful for circumstances like this one.
Imagine returning a promise in the validate
method :)
from form.
Built in async support would be nice, possibly. I was studying form.js looking at where it would be useful. Maybe if we could make it possible to specify a Promise (or a function that returns one) for individual validation attributes. The class-level validate method and its recursive utils could keep track of promises and re-run or perform cleanup after a resolve or reject. This would make it so that non-promise validation attributes could continue to update synchronously if an async request runs long. The only thing it wouldn't address that the above example does address is the ability to mix sync and async validations together. It's really nice to get the immediate feedback of the sync validations; keeps the form responsive to user interaction. I'm not sure the amount of effort would be worth the benefits, though. It's definitely something to think about.
Thanks again!
from form.
Interesting idea indeed. I'm intrigued by the idea of returning a promise for a validation message instead of the whole object. That would allow exactly what you're imagining: mixed validation timing.
It might be simple enough to maintain a promise queue that maps to validation fields as they come in. As those promises resolve, update the view, and also replace them with new ones if the field is changed again.
Thinking of it that way, it doesn't seem like it would be too much work. Are there any other locations in the api that promises would be beneficial?
from form.
Would that affect performance in large forms?
from form.
I doubt it would feel much different using promises, but it more than likely wouldn't be a breaking change. It can be written so that using the current API doesn't run any of the code for Promises.
Are there any other locations in the api that promises would be beneficial?
@tannerlinsley I'll see if I have more feedback after I try to implement the example I posted.
from form.
Related Issues (20)
- Add a way to display only one error for a field HOT 14
- Calling `createFormFactory<FormData>` and using a validator adapter throw TS errors HOT 1
- onChangeAsyncDebounceMs not properly debouncing HOT 1
- TanStack/Angular - Error when resetting the form HOT 1
- Missing error when validating via form options instead of via field HOT 3
- Factory `onSubmit` function not invoked whenever factory.useForm gets provided with `onSubmit` itself HOT 2
- Unable to read properties in nested array table HOT 2
- Nested Values Disappear when using StrictMode HOT 5
- onMount Error is not revalidated when the user changes the input HOT 2
- server actions example errors when using zod adapter HOT 1
- Cannot infer types on arrays of union of objects HOT 2
- Moving subfields of array field mix their values HOT 5
- Bad performance with 100+ rows in an array field HOT 4
- insertFieldValue replaces item instead of adding a new one and shift existing items
- solid form createField failed to import `memo` from "solid-js/web" when used in solid-start ssr mode HOT 2
- Issue with array + react + numbers HOT 2
- Nested Values Disappear when using StrictMode and `pushValue` HOT 11
- Incorrect field.state.value type HOT 5
- Server Actions example leaks backend code HOT 8
- Example for array usage lacks mode="array" HOT 1
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 form.