Neapolitan Pizza Margherita

    @bztes/svelte-ds-validator

    2.7.0 • Public • Published

    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

    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 }),
        },
      },
    });

    Install

    npm i @bztes/svelte-ds-validator

    DownloadsWeekly Downloads

    10

    Version

    2.7.0

    License

    ISC

    Unpacked Size

    55.5 kB

    Total Files

    66

    Last publish

    Collaborators

    • bztes