final-form / react-final-form-html5-validation Goto Github PK
View Code? Open in Web Editor NEWA swap-in replacement for ๐ React Final Form's <Field> component to provide HTML5 Validation
License: MIT License
A swap-in replacement for ๐ React Final Form's <Field> component to provide HTML5 Validation
License: MIT License
One does not simply do this as usually:
<Field name="xTest" required type="number" render={({input}) => (
return <input {...input}/>
)/>
It is now necessary to also pass ({input, ...rest})
to <input {...input} {...rest}/>
, but careful, there also is the meta
object!, so we must first consume it even though we don't need it. ({input, meta, ...rest})
I believe that it would make better sense to include all input props inside input
ย property. If not, can you please shed some light on it and perhaps better documented in the example here? https://github.com/final-form/react-final-form-html5-validation
Bug report
Asynchronously reinitialized fields (form prop initialValues
changes) do not trigger validation. Meaning that untouched fields with populated values from initialValues
fail on form validation.
Validation should happen on the form reinitialize, whenever prop initialValues
changes
"final-form": "4.20.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-final-form": "6.5.3",
"react-final-form-html5-validation": "1.1.0",
Recommended practices here https://github.com/final-form/react-final-form/blob/master/docs/faq.md#how-can-i-trigger-a-submit-from-outside-my-form
don't trigger HTML5 validation, luckily another method can be used to work around the issue.
I wonder if this is design limitation or a bug.
Valid input when enter: abc.def@mail
Show error on: abc.def@mail - invalid email
you can check issue here https://codesandbox.io/s/14r018yjp4
with type mail like abc.def@mail into email field and no error
React 17 is not listed as a peerDependency, causing NPM to throw "could not resolve dependency" when using React 17.
As I believe this package is pefectly able to work under React 17, peerDependencies should be updated:
{
"react": "^15.3.0 || ^16.0.0-0 || ^17.0.0",
"react-dom": "^15.3.0 || ^16.0.0-0 || 17.0.0",
}
Final form: 4.20.1
React-final-form: 6.5.2
React-final-form-html5-validation: 1.1.0
Node 15.2.0
NPM 7.0.8
Solution which i have found.
input[name="${name}"],textarea[name="${name}"],select[name="${name}"]
);Bug report
If required
prop is initially true
, then the validate function continues to require the field to be filled in, even if you later change the required
prop to false
.
As soon as required
prop changes, validation checks should reflect that that. So if you change it to false
, the field should no longer be required.
https://codesandbox.io/s/react-final-form-html5-validation-example-n2q8d
Likely related to #13
Another good reason you might consider adding to the "Why not add this functionality directly into the officially bundled Field component?" section of the readme is that HTML5 validation has accessibility considerations.
See e.g. https://developer.paciellogroup.com/blog/2019/02/required-attribute-requirements/
Bug report
The distributed builds are huge, for example, the react-final-form-html5-validation.es.js
is 670kb. It also contains references to things like __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner
which doesn't seem right.
This looks like a small library, the build should also be small.
final-form: ^4.8.3
react-final-form-html5-validation: 1.0.0
Programmatically set html5 validated fields don't get set to valid.
Valid programmatically set values should be validated as valid.
https://codesandbox.io/s/m4woxw1xv8
First attempt to submit, which gives a validation error.
Hit "Programmatically set name field" (notice in FF the field is outline in red).
Hit Submit again, and notice the field still gives a validation error.
To make the field vaild, you must directly edit the field.
This also seems to apply to browser autofilled fields, but maybe only some of the time? (I'm not sure I can reproduce this consistently.)
Latest (2019-03-29) FF, RFF, RFF HTML5 Validation, React, ReactDOM.
Tested in Firefox 66.0.1 and Chrome 73.0.3683.86 (64-bit) on Xubuntu 18.04.
Bug
If you pass in an async validate
prop to Field
, the HTML5 validations are never checked (because of this code).
The async validation will be resolved and used before continuing to the HTML5 validations.
feature request
errorKeys are not exposed
errorKeys are exposed
curent code
var errorKeys = ['badInput', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow', 'stepMismatch', 'tooLong', 'tooShort', 'typeMismatch', 'valueMissing'];
/// ...
export { Html5ValidationField as Field };
desireble code
var errorKeys = ['badInput', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow', 'stepMismatch', 'tooLong', 'tooShort', 'typeMismatch', 'valueMissing'];
//...
export { Html5ValidationField as Field , errorKeys};
so i can consume it in my app like this
import {Field, errorKeys} from "react-final-form-html5-validation";
export default props => {
const messages = {};
errorKeys.forEach(key => {
messages[key] = `My localized ${key}`;
});
return <Field {...props} {...messages} />;
}
Any idea where I can get hold of typescript types for this please?
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.