Getting started
High-order components
Components
Developers
validate()
Specification
Performs manual validation of the referenced
Form.Always favor conventional form submit via
Button[type="submit"]. Form validation is obviously included prior to submit action, so there is no need to explicitly invoke validation. However, there are use cases to refer to manual validation. Please see those below. Definition
1
type Validate = () => Promise<boolean>
Copied!
Use cases
There are several use cases when using manual validation may be appropriate, as opposed to conventional form submit flow.
Submitting multiple forms at once
In this case you may want to validation each form independently, and perform a submit based on the accumulated validity of all forms.
Consider
Field.Group for semantical separation of the form sections. Using field groups validates and submits all the groups automatically, as they are the part of a single form.Logic dependent on the runtime validity of a form
You may want to show/hide different UI elements, or perform any subsequent actions based on the validity of a form in the given point of time (apart of submit).
Example
Simple example
1
import React from 'react'
2
import { Form } from 'react-advanced-form'
3
import { Input } from 'react-advanced-form-addons'
4
5
export default class Example extends React.Component {
6
handleClick = () => {
7
this.form.validate().then((isFormValid) => {
8
// ...
9
})
10
}
11
12
render() {
13
return (
14
<div>
15
<Form ref={form => this.form = form}>
16
<Input
17
name="username"
18
required />
19
</Form>
20
<a href="#" onClick={this.handleClick}>Validate</a>
21
</div>
22
)
23
}
24
}
Copied!
Using async/await
Since validate function returns a Promise, you can use async/await to retrieve the validity of a form in a single line:
1
handleClick = async () => {
2
const isFormValid = await this.form.validate()
3
}
Copied!
Last modified 3yr ago