Browse guides

Manage form values and validation

Validate and submit a profile while its form progress remains visible.

The example binds an editable name through v-form and v-field, shows validation, dirty and inflight state, records the submit result and renders success or submitError.

Table of contents

Main APIs

FormStore
Coordinates form state, validation, transforms and submission.
formSchemaShield
Applies the schema validation path exposed for Valyrian.js forms.
tsx
import { mount } from "valyrian.js";
import { FormStore } from "valyrian.js/forms";

const result = { submitted: null as boolean | null, savedName: "" };

const profileForm = new FormStore({
  state: { name: "" },
  schema: {
    type: "object",
    required: ["name"],
    properties: { name: { type: "string", minLength: 2 } },
  },
  clean: { name: (value) => String(value).trim() },
  onSubmit: async (values) => {
    await new Promise((resolve) => setTimeout(resolve, 500));
    if (values.name === "fail") {
      throw new Error("Profile could not be saved");
    }
    result.savedName = values.name;
  },
});

function ProfileForm() {
  return (
    <main>
      <form
        v-form={profileForm}
        onsubmit={() => {
          result.submitted = profileForm.success;
        }}
      >
        <label>
          Name
          <input name="name" v-field={profileForm} />
        </label>
        <p v-if={profileForm.validationErrors.name}>
          {profileForm.validationErrors.name}
        </p>
        <button type="submit" disabled={profileForm.isInflight}>
          {profileForm.isInflight ? "Saving profile..." : "Save profile"}
        </button>
      </form>

      <p>Dirty: {String(profileForm.isDirty)}</p>
      <p>Last submit result: {String(result.submitted)}</p>
      <p v-if={profileForm.submitError}>
        {profileForm.submitError instanceof Error
          ? profileForm.submitError.message
          : String(profileForm.submitError)}
      </p>
      <p v-if={profileForm.success}>Saved profile: {result.savedName}</p>
    </main>
  );
}

mount("body", ProfileForm);

Error

`validationErrors` and `submitError` expose validation and submission failures separately.

Continue the cumulative application

Exact references