@aofl/form-validate

@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

• Login Form
• Sign Up form - async validator example

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