Sign-up & Validation

A live gform-react sign-up form showing cross-field validation (password / confirm) and async validation (username availability) with withCustomValidation and withCustomValidationAsync.

The control gallery in Event Registration covers which inputs gform wires up. This one covers the harder half - validation. It's where gform's API does the work the native constraints can't:

Cross-field rule - "confirm password" compares against the live password value. Custom validators receive (input, fields), so fields.password.value is always the current value.
Async rule - "username availability" runs withCustomValidationAsync. While it's in flight the field is held invalid with an empty message, which we surface as a Checking… hint.
Re-validating on a sibling change - editing password re-runs the confirm check via dispatchChanges({}, { validate: true }), so a previously-matching confirm doesn't go stale.

Custom validators return true to signal an error

A custom handler returns true when the value is invalid and sets input.errorText itself (returning false means valid). This is the opposite of what some libraries do, so it's the one thing to internalize before reading the code.

Loading playground…

Async validity gates submit automatically

While the async username check is pending, the field stays invalid, so state.isInvalid keeps the submit button disabled until the check resolves - you never have to track "is a check in flight?" yourself.