Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@aofl/form-validate

Package Overview
Dependencies
Maintainers
2
Versions
130
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aofl/form-validate

Form validation mixin for AoflElement

  • 3.14.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

@aofl/aofl-validate

@aofl/aofl-validate comes with a handful of form validation functions and an aofl-element mixin to simplify form validation for webcomponents. It even bundles some basic validators.

Api Documentation

Examples

Installation

npm i -S @aofl/aofl-validate

Usage

...
import {validationMixin, isRequired, minLength} from '@aofl/aofl-validate';

class Login extends validationMixin(AoflElement) {
  get validators() {
        return {
      username: {
        isRequired
      },
      password: {
        isRequired,
        min: minLength(8)
      }
    };
  }
}
// results in

login-form: {
  form: {
    valid: true,
    pending: false,
    observed: false,
    username: {
      valid: true,
      pending: false,
      observed: false,
      isRequired: {
        valid: true,
        pending: false,
        observed: false,
      }
    },
    password: {
      valid: true,
      pending: false,
      observed: false,
      isRequired: {
        valid: true,
        pending: false,
        observed: false,
      },
      min: {
        valid: true,
        pending: false,
        observed: false,
      }
    }
  }
}

Methods

All properties of element.form are instances of the same interface and therefore all properties and methods are available on each level.

this.form.validate();
this.form.username.validate();
this.form.username.inRequired.validate();

// and respectively
this.form.valid;
this.form.username.valid;
this.form.username.isRequired.valid;

reset()

Reset the form validation object to it's initial state.

validate()

When validate is invoked it call validate on it's properties resulting in the preperties' validation functions to be invoked.

this.form.validate(); // validates every property

this.form.username.validate(); // validates username

Properties

valid

Checks the .valid property of it's properties and return false if any of them are invalid.

this.form.valid; // return the validity of the entire form

this.form.username.valid; // return the validity of username

pending

Checks the .pending property of it's properties and return true if any of them are pending.

this.form.pending; // return true if any property is pending

this.form.username.pending; // returns true if username is pending

observed

Boolean property that signifies if a form proprety was validated.

this.form.observed; // return true if all properties have been observed

this.form.username.pending; // returns true if username has been observed

validateComplete

Returns a promise that resolves when the latest async operation has completed.


Bundled Validators

isRequired

Test whether value is empty or not.

import {isRequired} from '@aofl/aofl-validate';

class MyElement extends validationMixin(AoflElement) {
...
  get validators() {
    return {
      password:  {
        isRequired
      },
      ...
    };
  }
...
}

isEqual

Test whether the values of two fields are equal. E.g. password & verify password fields.

import {isEqual} from '@aofl/aofl-validate';

class MyElement extends validationMixin(AoflElement) {
...
  get validators() {
    return {
      password: {
        ...
      },
      verifyPassword:  {
        isEqual: isEqual('password')
      }
    };
  }
...
}

minLength

Test whether the value meets a minimum length requirement.

import {minLength} from '@aofl/aofl-validate';

class MyElement extends validationMixin(AoflElement) {
...
  get validators() {
    return {
      password: {
        minLength: minLength(8)
      },
      ...
    };
  }
...
}

maxLength

Test whether the value meets a maximum length requirement.

import {maxLength} from '@aofl/aofl-validate';

class MyElement extends validationMixin(AoflElement) {
...
  get validators() {
    return {
      password: {
        maxLength: maxLength(8)
      },
      ...
    };
  }
...
}

isAllDigits

Test whether the value consists of only digits.

import {isAllDigits} from '@aofl/aofl-validate';

class MyElement extends validationMixin(AoflElement) {
...
  get validators() {
    return {
      password: {
        isAllDigits
      },
      ...
    };
  }
...
}

pattern

Test whether the value matches a pattern.

import {pattern} from '@aofl/aofl-validate';

class MyElement extends validationMixin(AoflElement) {
...
  get validators() {
    return {
      email: {
        validEmail: pattern(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2, 4}$/)
      },
      ...
    };
  }
...
}

compare

Compare values of 2 form fields based on a comparator function

import {compare, isRequired} from '@aofl/aofl-validate';

class MyElement extends validationMixin(AoflElement) {
...
  get validators() {
    return {
      questions: {
        question1: {
          isRequired
        },
        question2: {
          isRequired,
          unique: compare('questions.question1', (value, otherValue) => value !== otherValue)
        },
        question3: {
          isRequired,
          unique: compare('questions.question2', (value, otherValue) => value !== otherValue)
        }
      },
      ...
    };
  }
...
}

Keywords

FAQs

Package last updated on 18 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc