🔒 FieldSafe

Security and reliability of the data in your form.

• A general-purpose library when it comes to data validation.
• This package allows you to easily validate and keep your forms safe.

Install

NPM

$ npm install fieldsafe

import { FSValidator } from "fieldsafe";

const emailValidator = FSValidator.Email;
const isEmail = emailValidator.check("[email protected]");
console.log(isEmail); // true

CDN

<script src="https://unpkg.com/[email protected]/dist/fieldsafe.umd.js"></script>

<script type="module">
const fs = FieldSafe;
const fsValidator = fs.FSValidator;

const emailValidator = fsValidator.Email;
console.log(emailValidator.check("[email protected]")); // true
</script>

✅ Validation features

📧 Email

Returns 'true' if email format is valid. This validation is following RFC 5322 standards.

import { FSValidator } from "fieldsafe";

const validator = new FSValidator.Email;
console.log(validator.check("[email protected]")); // true

🔑 Password

The password will be validated according to the FSValidator.Password class. This contains useful methods for password manipulation.

import { FSValidator } from "fieldsafe";

const validator = new FSValidator.Password("Mystrongpass21@&");
validator
  .min(8, "Password must contain at least 8 characters")
  .mustContainDigits(1, "Password must contain at least 1 number")
  .mustContainSpecialChars(1, "Password must contain at least 1 special character")
  .mustContainUppercase(1, "Password must contain at least 1 uppercase");

console.log(validator.check()); // true

If an error occurs during password validation, an informative object is displayed.

{
  errs: true,
  messages: [
    0: "Password must contain at least 8 characters",
    1: "Password must contain at least 1 uppercase"
  ]
}

💡 Available methods:

• addPassword(password: string)
• min(value: number, message: string)
• max(value: number, message: string)
• mustContainDigits(minValue: number, message: string)
• mustContainSpecialChars(minValue: number, message: string)
• mustContainUppercase(minValue: number, message: string)
• mustContainLowercase(minValue: number, message: string)
• check()

📁 File

The FSValidator.File validation class allows you to restrict certain validation rules for file upload inputs.

import { FSValidator } from "fieldsafe";

const form = document.forms.submitForm;
const input = document.getElementById("fileInput");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const file = new FSValidator.File(input);

  file
    .sizeGreaterThan(200, "KB")
    .sizeLessThan(300, "KB");

    console.log(file.check()); // true
});

If an error occurs while validating file properties, a JSON object is returned.

{
    errs: true,
    messages: [
        "File size is not larger than the specified size"
    ]
}

💡 Available methods:

• getSize(format?: string)
• sizeGreaterThan(value: number, format?: string)
• sizeLessThan(value: number, format?: string)
• sizeGreaterThanOrEqual(value: number, format?: string)
• sizeLessThanOrEqual(value: number, format?: string)
• sizeEqualTo(value: number, format?: string)
• sizeNotEqualTo(value: number, format?: string)
• check()

🎭 Masks

You can customize the fields with masks and make the user experience more intuitive.

fs-mask property allow adjust the right value format inside input. Each # represents a number.

<input type="text" name="cpf" placeholder="cpf" id="cpf" fs-mask="###.###.###-##" />

You can use the Mask class to initialize the input auto-formatting.

import { Mask } from "fieldsafe";

const fields = [
  document.getElementById("cpf")
  // All inputs masked here...
];

const mask = new Mask();
mask.init(fields);