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
type Validate = () => Promise<boolean>
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
import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'
​
export default class Example extends React.Component {
  handleClick = () => {
    this.form.validate().then((isFormValid) => {
      // ...
    })
  }
​
  render() {
    return (
      <div>
        <Form ref={form => this.form = form}>
          <Input
            name="username"
            required />
        </Form>
        <a href="#" onClick={this.handleClick}>Validate</a>
      </div>
    )
  }
}
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:
handleClick = async () => {
  const isFormValid = await this.form.validate()
}
​
reset()
serialize()
Last updated 1 year ago