Custom User Input Validation

Overview

If you would like to perform custom user input validation for your component, add the following method

export function validateUserInput(): ValidationResult {}

Example

<script lang="ts">
  import { ComponentLabel, convertDataAttributes, GroupSlot } from "@pragmatic-engineering/svelte-form-builder-[flavor]";
  import type { ComponentOptions, Field, FormTab, ValidationResult } from "@pragmatic-engineering/svelte-form-builder-[flavor]/Utils/types";
  export let componentOptions: ComponentOptions;
  export let field: Field;
  export let tab: FormTab;

  export function validateUserInput(): ValidationResult {
    if (field.htmlAttributes.value != "valid") {
      return { field: field, errors: [`${field.labelAttributes?.label} is not valid...`] };
    }
  }
</script>

<GroupSlot>
  <ComponentLabel field="{field}" />

  <input {...field.htmlAttributes} {...convertDataAttributes(field.dataAttributes)} type="text" bind:value="{field.htmlAttributes.value}" />
</GroupSlot>

Demo

1. Add the Custom Text component
2. Go to Preview
3. Open the Tools
4. Click Validate (you should see errors)
5. Enter ‘valid’ as the value and re-validate (you should see no errors)