GitHub
← Tutorials

Forms

A form with rel="async" is sent in the background instead of loading a new page. A validation error comes back as an error response, and a FormMonitor asks before the user leaves the page with what they typed.

  • rel="async"

    The form is sent with AsyncRequest; the response updates the page.

  • setError()

    The request failed: its error handler runs, the form keeps its changes.

  • FormMonitor

    Asks before a link, a page transition or a closed tab throws away what was typed.

  • success event

    A successful response makes the form clean again.

Controller.php
class FormController extends Controller
{
    public function registration(Request $request)
    {
        $response = new AsyncResponse();

        if ($error = $this->validate($request)) {
            // An error: the form keeps its unsaved changes.
            return $response->setError('Check the form', $error)->send();
        }

        return $response
            ->replace('#registration', view('form-success')->render())
            ->send();
    }
}

// The page: watch the form for unsaved changes
BigPipe::page()->call('bigpipe-util/dist/core/FormMonitor', null, [
    TransportMarker::element('registration'),
    ['message' => 'Leave without creating the account?'],
]);
Try it

Validation and unsaved changes

Type something, then follow a link: you are asked first. Submit with a field empty: the error comes back as a toast and the changes stay unsaved. Fill in both: the server replaces the form, and leaving no longer asks.