@bztes/svelte-ds-validator

svelte-ds-validator

Damn simple value checker for Svelte. Works well with forms

-1. Installation

npm i -D @bztes/svelte-ds-validator

yarn add -D @bztes/svelte-ds-validator

0. Example Code

<script>
  import { and, createChecker, email, number, required } from '@bztes/svelte-ds-validator';

  export let data;

  // apply validation rules
  const checker = createChecker({
    fields: {
      email: {
        value: () => data.email,
        rule: and(required(), email()),
      },
      age: {
        value: () => data.age,
        rule: and(required(), number({ min: 0, max: 130, int: true })),
      },
      message: {
        value: () => data.message,
        // Default rule can be skipped
        // rule: required(),
      },
    },
  });

  // validate on data changed
  $: data, checker.validate();
</script>

<form>
  <p>
    <label for="email">E-Mail</label>
    <input type="email" name="email" bind:value={data.email} />
    <span>{$checker.fields.email.error}</span>
  </p>
  <p>
    <label for="age">Age</label>
    <input type="number" name="age" bind:value={data.age} />
    <span>{$checker.fields.age.error}</span>
  </p>
  <p>
    <label for="message">Message</label>
    <textarea name="message" bind:value={data.message} />
    <span>{$checker.fields.message.error}</span>
  </p>
  <p>
    <button type="submit" disabled={!$checker.valid}>Send</button>
  </p>
</form>

1. Checker

Create

const checker = createChecker({
  defaultRule: ...
  fields: {
    [field_name]: {
      value: () => ...
      rule: ...
    }
  }
});

defaultRule (Optional)
A default rule that will be used by all checker fields where no specified rule is defined

fields.[].rule (Optional)
The rule to be checked. Use and() or or() to combine rules. If no rule is provided checker.defaultRule, settings.defaultRule or required() is used (in this order).

fields.[].value()
The function that provides the input value to be checked

Use

<script>
  ...

  const checker = ...

  // validate on data changed
  $: data, checker.validate();
</script>

<form>
  <p>
    <label for="message">Message</label>
    <textarea name="message" bind:value={data.message} />
    <span>{$checker.fields.message.error}</span>
  </p>
  <p>
    <button type="submit" disabled={!$checker.valid}>Send</button>
  </p>
</form>

checker.validate()
Triggers the validation. You probably want to call this function after the input has changed

$checker.fields.[].error
Contains the error message for the individual fields if the input is invalid, null otherwise

$checker.fields.[].valid
true if the specific input value is valid, false otherwise

$checker.valid
true if all input values are valid, false otherwise

2. Rules

Apply rules to a checker

const settings = {
  fields: {
    userMail: {
      rule: email(),
    },
  },
};

Available rules

• and
• email
• equals
• falsy
• files
• not
• number
• or
• regex
• required
• truthy

3. Custome error messages

local - only for the specified rule instance

const options = {
  min: 18,
  msg = {
    numberToSmall: 'adults only',
  },
};
rule = number(options);

global - default for all rule instances

number.Options.msg.numberToSmall = 'adults only';

4. Advanced

Rule definition

Static

rule = {
  validate(input): true | string
  value(fieldValue)?: any
  error?: string
}

validate
Validation function that takes an input value and returns true on validation success or an error message otherwise

value(input) (Optional)
Function that can be used to provide a rule specific input value for validate(). If undefined the field value will be used as an input

error (Optional)
Can be used to provide a rule specific error message. If undefined the return value from validate will be used as error message

Writing your own rule (examples)

const isTrue = {
  validate: (input) => input === true || 'Input value must be true',
};

With parameters

const equals = (value) => ({
  validate: (input) => value == input || 'Invalid value',
});

Overwrite all error messages for a rule

const checker = createChecker({
  fields: {
    legal: {
      value: () => data.legal,
      rule: { ...equals(true), error: 'Legal rules have to be accepted' },
    },
  },
});

Rule specific input values (value mapping)

let message = { response: 'Succeed', error: null };

const checker = createChecker({
  fields: {
    message: {
      value: () => message,
      rule: and({ ...required(), value: (v) => v.response }, { ...falsy(), value: (v) => v.error }),
    },
  },
});