final-form / final-form/react-final-form
Form is not submitting but validating field individually
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### What is the current behavior?
When I submit my form with the `handleSubmit`, nothing happen
### What is the expected behavior?
I expect to submit the form
### Form
Can anyone see a mistake here or is this a bug?
```jsx
import React, { useState, useRef } from 'react';
import { Field, Form } from 'react-final-form';
import { compose } from 'redux';
import TextField from '../../components/form/TextField';
import getAutoCompleteType from '../../components/form/utils';
import withTranslations from '../../core/translations/withTranslations';
import { useValidators } from '../../utils/form';
import Button from '../../ui/components/Button';
export default function ChangePasswordForm({
t,
setLocale,
locale,
}) {
const buttonRef = useRef();
const [showPassword, setShowPassword] = useState(false);
const {
oldPasswordValidator,
passwordValidator,
newPasswordValidator,
} = useValidators(t);
const _onSubmitPressed = async (values) => {
alert(JSON.stringify(values));
};
return (
alert('gi')}
validate={(values) => {
const errors = {};
if (values.password !== values.newPassword) {
errors.newPassword = t('utils.form.notIdenticalNewPassword');
}
return errors;
}}
render={({
handleSubmit,
form,
submitting,
pristine,
values,
}) => (
setShowPassword(!showPassword)}
/>
handleSubmit()}
/>
{t('changePasswordForm.submit')}
)}
/>
);
}
```
### What's your environment?
```jsx
"final-form": "^4.19.1",
"final-form-arrays": "^3.0.2",
"react-final-form": "^6.4.0",
"react-final-form-arrays": "^3.1.1",
"react-native-final-form-material": "^1.0.14",
```
- node 14
- chrome
- react 16.10.1
- react-native
### Other information
No log or error at all, tested in multiple page, it doesn't answer. I use react-final-form without trouble in many pages.
Contributor guide
Assessment
This issue has not been assessed yet.