🌊
jsf
  • About KalmiaJSF
  • Setup
  • Architecture
  • Contributing
  • Changelog
  • Guides
    • Cheat Sheet
  • Examples
    • Demo example
    • Basic examples
    • Kitchen Sink example
    • Charts example
  • Schema
    • Intro to Schema
    • Prop types
      • String
      • Boolean
      • Number & Integer
      • Object
      • Array
      • Date
      • Id
      • Null
      • Ref
      • Binary
    • Prop options
      • Disabling property
      • On prop init actions
      • Persist
      • On value change
      • On user value change
    • Handlers
      • Color picker
    • Creating custom handler
      • Working with arrays
    • Value provider
  • Validation
    • Custom validation
    • Eval
  • LAYOUT
    • Intro to Layout
    • Layout options
      • Show & hide
      • On click action
  • INTERFACES
    • Value Options
  • Form
    • Form data
  • OTHER
    • Events
    • Lifecycle hooks
    • Notifications support
  • PAGES & COMPONENTS
    • Page
    • Component
  • THEMING
    • Creating new theme variant
  • BUILDER
    • Shortcuts
  • Help
    • FAQ
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Validation

Custom validation

You can add custom validation with evalValidators instruction.

evalValidators?: {
    errorCodes: {
      code: string;
      message: string;
    }[];

    /**
     * Special props:
     * - $val
     * - $error
     * - $form
     *
     * Example:
     *  if (!$val.firstName || $val.firstName.length !== 6) throw [new $error('prop/is-exact-length', { length: 6 })]
     */

    $evals: string[];


    /**
     * Form value dependencies. You can put asterisk at the end.
     * Example:
     *  - a.b.c
     *  - a.b.c.d.f.g.h
     *  - a.d[]
     *  - a.d[].r.t[].d
     *
     *  If you need * support ask for it.
     */
    dependencies?: string[];
  };

A + B = C example

{
  "$theme": "rounded/blue",
  "schema": {
    "type": "object",
    "properties": {
      "a": {  "type": "number" },
      "b": {  "type": "number" },
      "ab": { "type": "number",  "evalValidators": {
          "errorCodes"  : [
            {
              "code"   : "custom",
              "message": "NOPE"
            }
          ],
          "$evals"      : [
            "if (($val.a + $val.b) !== $val.ab) { throw new $error('custom') }"
          ],
          "dependencies": [ "a", "b" ]
        }}
    }
  },
  "layout": {
    "type": "div",
    "items": [  {  "key": "a" }, { "type": "span", "title": "+" }, {  "key": "b" }, 
    { "type": "span", "title": "=" }, {  "key": "ab" }  ]
  }
}
PreviousValue providerNextEval

Last updated 4 years ago

Was this helpful?