Ak-field-validator NPM

Validator

Validator components are used to define validation rules that should be applied to an ak-field component.

Installation

npm install ak-field-validator

Using default validators

The ak-field-validator package exports several predefined Skate components for validation.

There are default validators for:

Min length
Max length
Required fields

HTML

Import the component in your JS resource:

bundle.js

import { ValidatorMinlength } from 'ak-field-validator';

Now you can use the defined tag in your HTML markup:

index.html

<html>
  <head>
    <script src="bundle.js"></script>
  </head>
  <body>
    <ak-field-text>
      <ak-field-validator-minlength minlength="5" slot="validator-slot"></ak-field-validator-minlength>
    </ak-field-text>
  </body>
</html>

You can also use it from within another JavaScript resource:

import ValidatorMinlength from 'ak-field-validator';

const validator = new ValidatorMinlength();
validator.minlength = 5;
document.body.appendChild(validator);

React

This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.

import { ValidatorMinlength } from 'ak-field-validator';
import reactify from 'skatejs-react-integration';

const ReactComponent = reactify(ValidatorMinlength, {});

ReactDOM.render(<ReactComponent />, container);

Defining a custom validator

This package exports the ValidatorBase class, which can be extended in order to define a new validator component.

You may simply define a new component by extending the base class and providing a validatorFunction which takes a value and returns a boolean value representing whether the value is valid or not.

The validatorFunction takes one arguments:

value: The value to be validated.

You may also refer to the validator element itself using this.

import { define } from 'skatejs';
import { ValidatorBase } from 'ak-field-validator';

const ValidatorIsEven = define('x-validator-even-length', class extends ValidatorBase {
  validatorFunction(value) {
    // value: The value to be validated.
    // this: The <x-validator-even-length> element.
    return value.length % 2 === 0;
  }
});

<html>
  <head>
    <script src="bundle.js"></script>
  </head>
  <body>
    <form>
      <ak-field-text>
        <x-validator-even-length slot="validator-slot">Field length must be even</x-validator-even-length>
      </ak-field-text>
    </form>
  </body>
</html>

More complex custom validators

More complex validators can be constructed by specifying custom properties and using them in the validatorFunction.

Note: If you are defining additional properties, it is important to not overwrite the invalid property (which is defined by ValidatorBase), e.g. by using Object.assign.

import { define } from 'skatejs';
import { ValidatorBase } from 'ak-field-validator';

const ValidatorStartsWith = define('x-validator-starts-with', class extends ValidatorBase {
  static get props() {
    return Object.assign({}, super.props, {
      start: { attribute: true }
    });
  }
  validatorFunction(value) {
    return value.startsWith(this.start);
  }
});

<html>
  <head>
    <script src="bundle.js"></script>
  </head>
  <body>
    <form>
      <ak-field-text>
        <x-validator-starts-with start="foo" slot="validator-slot"></x-validator-starts-with>
      </ak-field-text>
    </form>
  </body>
</html>

Classes

Functions

ValidatorMinlength

Kind: global class

Properties
- validatorMinlength.minlength : number

new ValidatorMinlength()

Minimum length validator.

JS Example

import ValidatorMinlength from 'ak-field-validator';
const myValidator = new ValidatorMinlength();

JS Example

<ak-field-validator-minlength minlength="5" slot="validator-slot">
  Must have at least 5 characters
</ak-field-validator-minlength>

validatorMinlength.minlength : number

The minimum length of the value

Kind: instance property of ValidatorMinlength
Default: 1

ValidatorMaxlength

Kind: global class

Properties
- validatorMaxlength.maxlength : number

new ValidatorMaxlength()

Maximum length validator.

JS Example

import ValidatorMaxlength from 'ak-field-validator';
const myValidator = new ValidatorMaxlength();

JS Example

<ak-field-validator-maxlength maxlength="10" slot="validator-slot">
  Must have at most 10 characters
</ak-field-validator-maxlength>

validatorMaxlength.maxlength : number

The maximum length of the value

Kind: instance property of ValidatorMaxlength
Default: 10

ValidatorRequired

Kind: global class

new ValidatorRequired()

Required validator.

JS Example

import ValidatorRequired from 'ak-field-validator';
const myValidator = new ValidatorRequired();

JS Example

<ak-field-validator-required slot="validator-slot">
  This field is required
</ak-field-validator-required>

ValidatorBase

The base class definition for a validator component.

Kind: global class

Methods
- validatorBase.validate(value)
- validatorBase.validatorFunction(value)

validatorBase.validate(value)

Perform validation on a value based on the supplied validator function.

Kind: instance method of ValidatorBase

Param	Description
value	The value to validate

validatorBase.validatorFunction(value)

The validator function that should be overriden when this class is extended.

Kind: instance method of ValidatorBase

Param	Description
value	The value to validate

generateStyles()

Generate the styles to hide the component. We need to do this because browsers with the polyfill cannot use the :host style, so we need to generate the style using the tagName.

Kind: global function

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!

atlaskit ui

babel-runtime classnames skatejs

2.0.0

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago