Inertia Rails

The <Form> component exposes reactive state and helper methods through its default slot. This allows you to react to processing states, display validation errors, and trigger form actions.

Available properties in the slot object:

• errors: An object containing validation errors (supports dotted notation for nested fields).
• hasErrors: Boolean indicating if there are any errors.
• processing: Boolean indicating if the form is currently being submitted.
• progress: Progress information for uploads.
• wasSuccessful: Boolean indicating if the last submission was successful.
• recentlySuccessful: Boolean indicating if the submission was recently successful.
• isDirty: Boolean indicating if the form has unsaved changes.
• defaults: The original default values of the form.
• setError, clearErrors, resetAndClearErrors: Error management utilities.
• reset, submit: Form action utilities.
• recentlySuccessful: Boolean indicating if the submission was recently successful.

<template>
  <Form
    action="/users"
    method="post"
    #default="{ errors, processing, wasSuccessful, reset }"
  >
    <input type="text" name="name" />

    <div v-if="errors.name">{{ errors.name }}</div>

    <button type="submit" :disabled="processing">
      {{ processing ? 'Creating...' : 'Create User' }}
    </button>

    <div v-if="wasSuccessful">User created successfully!</div>
  </Form>
</template>

The <Form> component supports Precognition, allowing you to trigger server-side validation for specific fields in real-time.

Key Helpers:

• validate(fieldName|options): Triggers validation for a field or set of fields. If called with an options object, you can provide onSuccess, onValidationError, onBeforeValidation, and onFinish callbacks. If called with an object containing only, it validates specific fields.
• invalid(fieldName): Returns true if the field has validation errors.
• valid(fieldName): Returns true if the field has passed validation.
• validating: Boolean indicating if a validation request is in progress.
• touch(fieldName): Marks a field as "touched" without triggering validation. You can then call validate() without arguments to validate all touched fields.
• touched(fieldName): Checks if a field has been touched.

Important Notes:

• Validation requests are automatically debounced (1500ms by default). Use validationTimeout prop to change this.
• A field only appears valid/invalid once it has changed and a response is received.
• By default, files are excluded from validation to prevent unnecessary uploads. Use the validateFiles prop to include them.

<template>
  <Form
    action="/users"
    method="post"
    #default="{ errors, invalid, validate, validating }"
  >
    <label for="name">Name:</label>
    <input id="name" name="name" @change="validate('name')" />
    <p v-if="invalid('name')">{{ errors.name }}</p>

    <p v-if="validating">Validating...</p>

    <button type="submit">Create User</button>
  </Form>
</template>

Inertia handles server-side validation errors differently than standard XHR requests. Instead of receiving a 422 Unprocessable Entity response, Inertia expects a standard server-side redirect back to the form page.

When validation fails, you should redirect the user back to the previous page and flash the validation errors into the session. The Inertia Rails adapter automatically shares these errors with the client-side via the errors prop.

Inertia determines if a request failed validation by checking the page.props.errors object. If errors are present, the request's onError() callback is triggered instead of onSuccess().

class UsersController < ApplicationController
  def create
    user = User.new(user_params)

    if user.save
      redirect_to users_url
    else
      # Redirect back to the form and share errors via the inertia option
      redirect_to new_user_url, inertia: { errors: user.errors }
    end
  end

  private

  def user_params
    params.expect(user: [:name, :email])
  end
end