Javascript-Form-Validation

Javascript Library providing form validation helpers

Table of contents

• Installation
• Usage
  • Include Library
  • Use components
    • Color
    • DateTime
    • Digits
    • EAN13
    • Email
    • Iban
    • IP
    • ISBN
    • JWT
    • No Digits
    • Password
    • Range
    • Same
    • Siren
    • Siret
    • Text
    • Url

Installation

VanillaJS

In order to use this library, download zip file and copy necessary files from dist folder into your assets folder.

NPM

Run

npm install javascript-form-validation

Usage

Include library

VanillaJS

To use the library, start by including the files you need into head section of your project.

<script src="your_directory/EmailField.min.js" defer></script>
<script src="your_directory/PasswordField.min.js" defer></script>

NodeJS

Import and instantiate the validator you want to use (example using Password)

// Import
const Validator = require("javascript-form-validation");

// Instanciation (don't use instanciations documented in "Use components" section below)
let passValidator = new Validator.PasswordField();

Use components

Each component is made to help you validate a single type of data in your project.

Color

The Color component helps you validate the input contains a valid CSS color code (Named, rgb, rgba or hex)

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(color) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | -------------- | | color | string | Color to check |

// Instantiation
let myColor = new ColorField(); // replace myColor by variable name of your preference

// Check Color
myColor.isValid("purple");
myColor.isValid("rgba(14, 85, 213, 0.4)");
myColor.isValid("#34D10C");

DateTime

The DateTime component helps you validate the input contains a valid DateTime (based on JS formats)

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(myDate) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | ------------- | | myDate | string | Date to check |

// Instantiation
let myDate = new DateTimeField(); // replace myDate by variable name of your preference

// Check DateTime
myDate.isValid("2021-05-31 02:30");

Digits

The Digits component helps you validate the input contains only digits (0-9)

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(myText) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | ------------- | | myText | string | Text to check |

// Instantiation
let myText = new DigitsField(); // replace myText by variable name of your preference

// Check string
myText.isValid("012345");

EAN13

The EAN13 component helps you validate the input contains a string that is a valid EAN13 number.

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(ean) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | -------------- | | ean | string | EAN13 to check |

// Instantiation
let ean = new Ean13Field(); // replace ean by variable name of your preference

// Check ean
ean.isValid("7612345678900");

Email

The Email component helps you validate the input contains a string that looks like an email. It doesn't validate the email exists.

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(email) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | -------------- | | email | string | Email to check |

// Instantiation
let email = new EmailField(); // replace email by variable name of your preference

// Check email
email.isValid("[email protected]");

Iban

The Iban (International Bank Account Number) component helps you validate the input contains a string that is a valid Iban (not that the account exists).

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(iban) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | -------------- | | iban | string | Iban to check |

// Instantiation
let iban = new IbanField(); // replace iban by variable name of your preference

// Check iban
iban.isValid("FR1234567890123456789012345");

IP

The IP component helps you validate the input contains a string that is a valid IP address (IPV4 and/or IPV6).

In order to use this component, first instantiate it and then use the isValid method to check it.

During instantiation, provide, if you like, optional parameters as an object to define what you require as IP version.

Parameters are as follows:

| Param | Type | Description | Default | | ------ | -------------------- | ---------------------- | ------- | | ipv4 | boolean | You check IPV4 version | true | | ipv6 | boolean | You check IPV6 version | true |

isValid(ip) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | -------------- | | ip | string | IP to check |

// Instantiation
let ipAddress = new IPField({ipv4: false}); // replace iban by variable name of your preference. This will check only IPV6

// Check ip
ipAddress.isValid("fffe::1");

ISBN

The ISBN (International Standard Book Number) component helps you validate the input contains a string that is a valid ISBN (not that the number exists).

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(isbn) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | -------------- | | isbn | string | Isbn to check |

// Instantiation
let isbn = new IsbnField(); // replace isbn by variable name of your preference

// Check isbn
isbn.isValid("978-2-02-130452-7");

JWT

The JWT (JSON Web Token) component helps you validate the input contains a string that is a valid JWT (not that the token exists nor that the signature is correct). **This only validated the token only contains valid characters and is correctly formed.

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(token) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | -------------- | | token | string | Token to check |

// Instantiation
let token = new JwtField(); // replace token by variable name of your preference

// Check token
token.isValid("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c");

No Digits

The NoDigits component helps you validate the input doesn't contain digits (0-9)

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(myText) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | ------------- | | myText | string | Text to check |

// Instantiation
let myText = new NoDigitsField(); // replace myText by variable name of your preference

// Check Text
myText.isValid("Hello");

Password

The Password component helps you validate the input contains a string that matches the strength level you look for.

In order to use this component, first instantiate it and then use the isValid method to check it.

During instantiation, provide, if you like, optional parameters as an object to define what you require in the password.

Parameters are as follows:

| Param | Type | Description | Default | | ----------- | -------------------- | ------------------------------------------ | ------- | | uppercase | boolean | You require at least 1 uppercase character | true | | lowercase | boolean | You require at least 1 lowercase character | true | | numeric | boolean | You require at least 1 numeric character | true | | special | boolean | You require at least 1 special character | true | | minLength | integer | You require a minimum length for password | 12 |

isValid(pass) ⇒ object|boolean

| Param | Type | Description | | ------ | ------------------- | ----------------- | | pass | string | Password to check |

// Instantiation
// This example requires uppercase, special, numeric and at least 15 characters
let pass = new PasswordField({lowercase: false, minLength: 15}); // replace pass by variable name of your preference

// This example requires uppercase, lowercase, special, numeric and at least 12 characters
let pass = new PasswordField(); // replace pass by variable name of your preference

// Check password
pass.isValid("here1sTheP@ssword!");

Range

The Range component helps you validate the input contains a number that matches the range you look for.

In order to use this component, first instantiate it and then use the isValid method to check it.

During instantiation, provide, if you like, optional parameters to define what you require as a range.

Parameters are as follows:

| Param | Type | Description | Default | | ----- | -------------------- | --------------------------- | ------- | | Min | integer | You require a minimum value | 0 | | Max | integer | You require a maximum value | 0 |

isValid(value) ⇒ object|boolean

| Param | Type | Description | | ------ | -------------------- | ----------------- | | value | integer | Number to check |

// Instantiation
// This example requires a number between 10 and 20
let range = new RangeField(10, 20); // replace range by variable name of your preference

// This example has no limits (just checks entry is a number)
let range = new Range(); // replace range by variable name of your preference

// Check password
range.isValid(12);

Same

The Same component helps you validate the input contains only identical values.

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(value1, value2, value3, ...) ⇒ boolean

| Param | Type | Description | | ------ | ------------------- | --------------- | | valueX | any | Values to check |

// Instantiation
let myText = new SameField(); // replace myText by variable name of your preference

// Check Values
myText.isValid(12, "12", variable, "15"); // Example will return false

Siren

The Siren component helps you validate the input contains a string that is a valid "SIREN" number (French companies identifier), not that it exists.

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(siren) ⇒ boolean

| Param | Type | Description | | ----- | ------------------- | -------------- | | siren | string | Siren to check |

// Instantiation
let siren = new SirenField(); // replace siren by variable name of your preference

// Check siren
siren.isValid("123 456 789");

Siret

The Siret component helps you validate the input contains a string that is a valid "SIRET" number (French companies identifier), not that it exists.

In order to use this component, first instantiate it and then use the isValid method to check it.

isValid(siren) ⇒ boolean

| Param | Type | Description | | ----- | ------------------- | -------------- | | siret | string | Siret to check |

// Instantiation
let siret = new SiretField(); // replace siret by variable name of your preference

// Check siret
siret.isValid("123 456 789 00001");

Text

The Text component helps you validate the input contains a string that meets the length you provide.

In order to use this component, first instantiate it and then use the isValid method to check it.

During instantiation, provide, if you like, optional parameters to define what you require as a range.

Parameters are as follows:

| Param | Type | Description | Default | | ----- | -------------------- | ---------------------------- | ------- | | Min | integer | You require a minimum length | 0 | | Max | integer | You require a maximum length | 0 |

isValid(text) ⇒ object|boolean

| Param | Type | Description | | ----- | ------------------- | ------------- | | text | string | Text to check |

// Instantiation
// This example requires a text length between 10 and 20
let text = new TextField(10, 20); // replace text by variable name of your preference

// Check text
text.isValid("Hello World!");

Url

The Url component helps you validate the input contains a string that meets the URL standard.

In order to use this component, first instantiate it and then use the isValid method to check it.

During instantiation, provide, if you like, optional parameter to define what you require as protocols.

Parameters are as follows:

| Param | Type | Description | Default | | ----------- | ------------------ | ------------------------------ | ----------------- | | Protocols | array | You require specific protocols | ["https", "http"] |

isValid(url) ⇒ boolean

| Param | Type | Description | | ----- | ------------------- | ------------- | | url | string | Url to check |

// Instantiation
// This example requires "https" or "ftp" protocols
let url = new UrlField(["https", "ftp"]); // replace url by variable name of your preference

// Check url
url.isValid("https://example.com");