Validators

Adding validators to your Control Fields

Creating a custom validator

To create custom validators, implement functions that follow the CustomValidatorSchemaFn interface. For example, let’s create a validator that allows us to enter only certain names:

import { CustomValidatorSchemaFn } from '@golemui/core';
import * as z from 'zod/mini';

export const allowedNames: CustomValidatorSchemaFn = (names: string[]) =>
  z.string().check(
    z.superRefine((val, ctx) => {
      if (names.includes(val) === false) {
        ctx.addIssue({
          code: 'custom',
          message: `Name "${val}" not in ${names.map((name) => `"${name}"`).join(', ')}`,
          input: val,
        });
      }
    }),
  );

Next, inform the form that it should use the custom validator when it encounters a specific key in the validator declaration within your JSON. To do this, create a CustomValidatorSchemas object and pass it to the form through its customValidators input.

React

import * as Core from '@golemui/core';
import { allowedNames } from './custom-validators/allowed-names';

const customValidators: Core.CustomValidatorSchemas = {
  allowedNames,
};

export function FormPage() {
  return (
    <div>
    <React.FormComponent
      (...)
      customValidators={customValidators}
    />
  </div>
  );
}

Angular

import * as Core from '@golemui/core';
import { allowedNames } from './custom-validators/allowed-names';

@Component({
  selector: 'my-form-app',
  template: `<gui-form
    (...)
    [customValidators]="customValidators">
    </gui-form>
  `,
})
class MyFormApp {
  protected customValidators: Core.CustomValidatorSchemas = {
    allowedNames,
  };
}

Lit

import * as Core from '@golemui/core';
import { allowedNames } from './custom-validators/allowed-names';

@customElement('lit-form')
export class FormElement extends LitElement {
  protected customValidators: Core.CustomValidatorSchemas = {
    allowedNames,
  };

  render() {
    return html`
        <gui-form
          (...)
          .customValidators=${this.customValidators}
        ></gui-form>
      `;
  }
}

Finally, declare your validator:

{
  {
    kind: 'control',
    widget: 'textinput',
    path: 'user.name',
    validator: { type: 'custom', allowedNames: ['John', 'Jane'] }
  },
}

Type something different than John and Jane and then focus out the input to trigger the validation.

Configuring when validation triggers

To allow users to define when field validation should run, set the validateOn: ValidateOn property at the form level.

type ValidateOn =
  | 'eager'
  | 'change'
  | 'blur'
  | 'submit'
  | ('change' | 'blur' | 'submit')[];

When not set, the default validateOn behaviour is 'eager'.

ValidateOn behaviour

• 'change' : When the user interacts with the field and changes its value.
• 'blur' : When the user has interacted with the field and leaves the field.
• 'submit': When using ‘submit’, validation triggers when the ‘submit’ event is emitted. When that happens, all fields are also touched first.

{
  widget: 'button',
  label: 'Create User',
  on: {
    click: 'submit',
  },
}

• 'eager': Validates when any of the above happens.

React

import * as Core from '@golemui/core';

export function FormPage() {
  return (
    <div>
    <React.FormComponent
      (...)
      validateOn="change"
    />
  </div>
  );
}

Angular

import * as Core from '@golemui/core';

@Component({
  selector: 'my-form-app',
  template: `<gui-form
    (...)
    [validateOn]="validateOn">
    </gui-form>
  `,
})
class MyFormApp {
  protected validateOn: Core.ValidateOn = 'change';
}

Lit

import * as Core from '@golemui/core';

@customElement('lit-form')
export class FormElement extends LitElement {
  protected validateOn: Core.ValidateOn = 'change';

  render() {
    return html`
        <gui-form
          (...)
          .validateOn=${this.validateOn}
        ></gui-form>
      `;
  }
}

JsonSchema support

Suffixes support