1.1.18 • Public • Published

Fast Form Validator Logo
Twitter Follow GitHub file size in bytes npm

Table of Contents


used as FFV is a streamlined solution to validate input fields.

Type: Object


  • 🔗 onEmail Function The default email field validator.

  • 🔗 onPassword Function The default password field validator.

  • 🔗 onDateOfBirth Function The default date field validator.

  • 🔗 setStrategyFor Function Creates a custom validator for a given input field.

  • 🔗 onSubmitButton Function Executes a function when a VALID form is submitted.

  • 🔗displayErrorsHere Function The HTML container (usually a div) that will show the list of feedback Messages.

  • onSuccess Object Contains two(4) ways to hide or handle the feedback element.

    • 🔗onSuccess.removeFeedback Function Hides the feedback element based on the display CSS property.
    • 🔗onSuccess.hideFeedback Function Hides the feedback element based on the visibility CSS property.
    • 🔗onSuccess.addClass Function Add a class to feedback element classList.
    • 🔗onSuccess.removeClass Function Remove a class from feedback element classList.
  • 🔗validate Function Starts the validating process by listening for changes on input fields.


<!DOCTYPE html>
<html lang="en">
<title>Your Form</title>
<script defer type="module" src=""></script>

.onPassword('password', 4, 22)
.onDateOfBirth('dob', 18)
.setStrategyFor('username', atLeastSix)
.onSubmitButton('submitBtn', hooray)

<!-- form here -->

//Usage on Node, just require the module

npm i fast-form-validator

const { FFV } = require('fast-form-validator');


Validates email input fields based on the input field ID


Returns fast-form-validator


Validates password input fields with a minimum and maximum character limit based on the input field ID. It enforces at least One upper case ,one lowercase and one digit. Default character limits are between 6 and 15 characters


  • id String Password input ID
  • minLength Number Min password character length
  • maxLength Number Max password character length

Returns fast-form-validator


Validates date input fields with a minimum age limit based on the input field ID


  • id String Date of birth input ID
  • age Number Minimum age allowed checked against today's date

Returns fast-form-validator


Provide fast-form-validator with the ID of an input field and the respective function to validate that input field

When an ID is passed, the ID is used as a prefix to create a getter for the current input value and a setter to set the error messages using the ID as a prefix with camelCase (e.g. someIDValue & someIDError) to get the value for assessment and to set the error messages to display to the user on invalid input

These will be properties and not methods, therefore accessed using:

this.usernameValue and this.usernameError

Or if you hate the this keyword

FFV.usernameValue and FFV.usernameError

Immediately giving you access to form field values in the document and a place to store a list of errors


<input type="text" class="form-control" id="username" />

Here a custom strategy is set to evaluate a username input field

FFV.setStrategyFor("username", atLeastSix);
this.usernameError = "username must be...";

this.usernameError sets this message in an array that will be shown if the input field value is invalid

Error messages are stored in an array and can be displayed all at once or once per invalid condition.

Here is a once per invalid entry example:

function atLeastSix() {
  if (!this.usernameValue) {
    this.usernameError = "❌ username can not be empty";
  if (this.usernameValue && this.usernameValue.length < 6) {
    this.usernameError = "❌Username must be at least 6 characters long";

To display all error messages at once, append the array instead of replacing the single error message

Usage: passing only the function reference

FFV.setStrategyFor("username", atLeastSix);


  • id String Input field ID
  • strategyFunction Function Function to validate that input field

Returns fast-form-validator


Pass a function to be executed when there are no input errors and the user clicks submit. A successful submission will immediately stop the submit button from receiving input, execute the desired function, then remove all event listeners for all aformentioned input fields and even the submit button. You can read more on why you would want to remove event listeners here though not as consequential in modern browsers.


  • id String Submit button ID
  • submitAction Function Function to run when the user submits the form and the form has passed validation (no input errors)

Returns fast-form-validator



  • htmlID String ID of the HTML container element that will display the error messages

Returns fast-form-validator


Hides the element that contains the feedback messages using css visibility property

Returns fast-form-validator


Hides the element that contains the feedback messages using css display property

Returns fast-form-validator


Adds a classname to the element that contains the feedback messages on successful validation

Returns fast-form-validator


Removes a classname to the element that contains the feedback messages on successful validation

Returns fast-form-validator


The last method that should be called after setting strategies for inputs or after using default strategies, it starts the validating process by listening to input fields.

Returns Boolean true if the all fields have valid input, false otherwise

Live Example



I just started learning react observing how it manages state and I got the idea to make this module, learning the revealing module pattern as well as strategy pattern along the way


DownloadsWeekly Downloads






Unpacked Size

1.84 MB

Total Files


Last publish


  • clickwithclark