final-form/react-final-form-html5-validation

A swap-in replacement for 🏁 React Final Form's <Field> component to provide HTML5 Validation

You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Final Form.

---

💰 Hey there! Do you fancy yourself a javascript expert? Take this quiz and get offers from top tech companies! 💰

---

🏁 Final Form

✅ Zero dependencies

✅ Framework agnostic

✅ Opt-in subscriptions - only update on the state you need!

✅ 💥 5.1k gzipped 💥

---

Final Form is sponsored by Sencha.

Comprehensive JS framework and UI components for building enterprise-grade web apps.

---

💬 Give Feedback on Final Form 💬

In the interest of making 🏁 Final Form the best library it can be, we'd love your thoughts and feedback.

Take a quick survey.

---

Get Started

Philosophy

Examples

API

Companion Libraries

Who's using Final Form?

react-final-form-html5-validation's Issues

expose errorKeys

Are you submitting a bug report or a feature request?

feature request

What is the current behavior?

errorKeys are not exposed

What is the expected behavior?

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} />;
}

Failed to execute 'querySelector' on 'Element': 'input[name=company.country],textarea[name=company.country],select[name=company.country]' is not a valid selector.

Are you submitting a bug report or a feature request?

• Feature Request

What is the current behavior?

• The current version is not supporting Field with Object.Key pattern name which is supported by react-final-form's Field component.
• When such a name pattern is used it creates an incorrect node selector i.e 'input[name=company.country]'.

What is the expected behavior?

• Field Component should support object.key naming pattern.

Sandbox Link

What's your environment?

• final-form v4.8.3
• react-final-form v3.6.5
• react-final-form-html5-validation v1.0.1
• Node v8.9
• npm v6.3

Other information

Solution which i have found.

• This issue can be fixed by surrounding the name with quotes.
  input = root.querySelector(input[name="${name}"],textarea[name="${name}"],select[name="${name}"]);

HTML5 Field validation is not invoked on external form submit

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.

https://codesandbox.io/s/7kk9w2ryzq

Typescript types?

Any idea where I can get hold of typescript types for this please?

Expand "why not add this functionality directly" section of readme to mention accessibility considerations

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/

Unexpectedly Large Package Build

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

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.

What is the expected behavior?

This looks like a small library, the build should also be small.

Sandbox Link

What's your environment?

final-form: ^4.8.3

react-final-form-html5-validation: 1.0.0

Other information

Programmatically setting fields to valid values still shows validation error.

bug report

What is the current behavior?

Programmatically set html5 validated fields don't get set to valid.

What is the expected behavior?

Valid programmatically set values should be validated as valid.

Sandbox Link

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.)

What's your environment?

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.

Field continues to be required even after changing required prop to false

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

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.

What is the expected behavior?

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.

Sandbox Link

https://codesandbox.io/s/react-final-form-html5-validation-example-n2q8d

Other information

Likely related to #13

React 17 compatibility

bug report/feature request

What is the current behavior?

React 17 is not listed as a peerDependency, causing NPM to throw "could not resolve dependency" when using React 17.

What is the expected behavior?

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",
}

What's your environment?

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

Why are the `...rest` properties not included in `input`

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

email validation

What is the current behavior?

Valid input when enter: abc.def@mail

What is the expected behavior?

Show error on: abc.def@mail - invalid email

Other information

you can check issue here https://codesandbox.io/s/14r018yjp4
with type mail like abc.def@mail into email field and no error

Async validate prop always skips HTML5 validations

Are you submitting a bug report or a feature request?

Bug

What is the current behavior?

If you pass in an async validate prop to Field, the HTML5 validations are never checked (because of this code).

What is the expected behavior?

The async validation will be resolved and used before continuing to the HTML5 validations.

Form validation do not run for untouched fields after initialValues change

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

Asynchronously reinitialized fields (form prop initialValues changes) do not trigger validation. Meaning that untouched fields with populated values from initialValues fail on form validation.

What is the expected behavior?

Validation should happen on the form reinitialize, whenever prop initialValues changes

Sandbox Link

Codesandbox example

Versions:

    "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",