How can I trigger final form onSubmit? - html

Question

I have a problem with React Final Form. I tried to follow the example on the official documentation, but I still don't understand why my form doesn't want to call the onSubmit as the example, and I'm still trying to understand what the role of handlesubmit is.
I think that the problem is that my fields are called from another component that uses the useField hook.
import React, { FC } from 'react'
import { Form, Field } from 'react-final-form'
import {
Grid,
Box,
Button,
createStyles,
makeStyles,
Theme,
} from '#material-ui/core'
import { render } from 'react-dom'
import InputField from './InputField'
interface InputFinalFormModalProps {
fieldsValue: { title: string; value: string }[]
}
const useStyles = makeStyles((theme: Theme) =>
createStyles({
annullaBtn: {
backgroundColor: '#fff',
border: `1px solid ${theme.palette.secondary.main}`,
color: theme.palette.secondary.main,
fontFamily: 'HouschkaHead',
fontSize: '17px',
fontWeight: 'bold',
paddingLeft: '40px',
paddingRight: '40px',
marginRight: '15px',
},
salvaBtn: {
fontFamily: 'HouschkaHead',
fontSize: '17px',
fontWeight: 'bold',
paddingLeft: '40px',
paddingRight: '40px',
marginLeft: '15px',
},
row: {
width: '100%',
textAlign: 'end',
},
container: {
'& > .MuiGrid-item': {
paddingBottom: '20px',
paddingTop: '0px',
paddingLeft: '11px',
paddingRight: '11px',
},
},
})
)
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
const onSubmit = async (values: {}) => {
await sleep(300)
console.log(JSON.stringify(values))
}
const validate = (values: {}) => {
const errors = {message: ''}
if (!Object.values(values).toString()) {
errors.message = "Required";
}
return errors
}
const InputFinalFormModal: FC<InputFinalFormModalProps> = ({ fieldsValue }) => {
const classes = useStyles()
return (
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<Grid container className={classes.container}>
{fieldsValue.map((field) => {
return (
<InputField title={field.title} value={field.value} />
)
})}
</Grid>
<Box className={classes.row} mt="20px">
<Button className={classes.annullaBtn}>Annulla</Button>
<Button
type="submit"
onClick={() => onSubmit(values)}
className={classes.salvaBtn}
disabled={submitting || pristine}
>
Salva
</Button>
</Box>
{/* <button
type="submit"
onClick={() => onSubmit(values)}
disabled={submitting || pristine}
>
Submit
</button>
<button
type="button"
onClick={form.reset}
disabled={submitting || pristine}
>
Reset
</button>
<pre>{JSON.stringify(values)}</pre>*/}
</form>
)}
/>
)
}
InputFinalFormModal.displayName = 'InputFinalFormModal'
export default InputFinalFormModal
And here my snippet about the inputField
import React, { FC, useEffect, useState } from 'react'
import { useField } from 'react-final-form'
import {
Box,
Grid,
createStyles,
makeStyles,
Theme,
withStyles,
} from '#material-ui/core'
import InputLabel from '#material-ui/core/InputLabel'
import InputBase from '#material-ui/core/InputBase'
import { parse } from 'path'
interface InputFieldProps {
title: string
value: string
}
const BootstrapInput = withStyles((theme: Theme) =>
createStyles({
input: {
borderRadius: 4,
position: 'relative',
backgroundColor: theme.palette.common.white,
border: '1px solid #bdc7d3',
width: '100%',
padding: '10px 12px',
transition: theme.transitions.create(['border-color', 'box-shadow']),
// Use the system font instead of the default Roboto font.
fontFamily: 'Montserrat',
fontSize: '14px',
lineHeight: '1.21',
fontWeight: 'normal',
color: theme.palette.text.primary,
'&:focus': {
boxShadow: 'inset 0 0 12px 4px rgba(0, 179, 152, 0.05)',
borderColor: theme.palette.secondary.main,
},
},
})
)(InputBase)
const useStyles = makeStyles((theme: Theme) =>
createStyles({
inputTitle: {
color: '#7C92A8',
fontSize: '19px',
lineHeight: 1.76,
transition: 'font-weight 0.5s, color 0.5s',
'&.Mui-focused': {
color: theme.palette.secondary.main,
fontWeight: 'bold',
},
},
requiredText:{
color: 'red'
}
})
)
const InputField: FC<InputFieldProps> = ({ title, value}) => {
let {input, meta} = useField(title)
const classes = useStyles()
let [handleValidate, setHandleVlidate] = useState(false)
let [required, setRequired] = useState('')
useEffect(() => {
if(parseInt(value)){
setRequired('valore non valido')
setHandleVlidate(true)
/* if(isNaN(input.value)){
} */
}else{
if(!input.value){
setRequired('Campo Obbligatorio')
setHandleVlidate(true)
}
}
},[input.value])
return (
<Grid item xs={12} md={6}>
<InputLabel
shrink
htmlFor="bootstrap-input"
className={classes.inputTitle}
>
{title}
</InputLabel>
<BootstrapInput
{...input}
defaultValue={value}
id="bootstrap-input"
placeholder={value}
/>
{meta.touched && !input.value && (
<span className={classes.requiredText}>{required}</span>
)}
</Grid>
/* <Grid item xs={6} lg={6}>
<Box>
<label className={classes.inputTitle} onClick={() => console.log('check')}>{title}</label>
</Box>
<input {...field.input} className={classes.inputField} placeholder={value} />
{field.meta.touched && field.meta.error && (
<span>{field.meta.error}</span>
)}
</Grid> */
)
}
InputField.displayName = 'InputField'
export default InputField

Answer 1

If your form is valid, the validation function needs to return {}, not { message: '' }.