Skip to main content

onvalidation

Description​

Fires when the validation process is completed

It provides the latest field values and any validation errors. This can be used to determine if the form is valid or to display error messages.

Usage​

onvalidation?: (ev: {
    errors: {
        [key: string]: {
            errorType: "validation" | "required";
        };
    };
    values: { [key: string]: any };
}) => void;

Parameters​

The callback receives a single parameter ev with the following fields:

  • errors — (required) a map of field keys to their validation errors:

    • key — (required) the field name where the error occurs
    • errorType — (required) the type of validation error:
      • "required" — the field is missing but marked as required.
      • "validation" — the custom validation function returned false.

  • values — (required) a map of field keys to current values

Handling validation results​

<script>
  import { Editor } from "@svar-ui/svelte-editor";
  import { getData } from "../data";
  
  const { items, values } = getData();
  
  function onvalidation(ev){
    const fields = Object.keys(ev.errors);
    console.log("validation failed in fields: ", fields.join(", "));
  }
</script>

<Editor {items} {values} {onvalidation} />

Details​

If autoSave: true, the entire form is validated automatically whenever data changes, but only for fields that have validation rules.

If autoSave: false, on individual field change, only the changed field is validated. On clicking the Save button, all fields with validation rules are validated.

Validation errors can be of type:

  • "required" – if the field is missing and marked as required
  • "validation" – if the custom validation function returns false

Both types are treated the same in logic.