Table of Contents
fast-form-validator
used as FFV is a streamlined solution to validate input fields.
Type: Object
Properties
-
🔗 setStrategyForFunction Creates a custom validator for a given input field. -
🔗 onSubmitButtonFunction Executes a function when a VALID form is submitted. -
🔗 displayErrorsHereFunction The HTML container (usually a div) that will show the list of feedback Messages. -
onSuccessObject Contains two(4) ways to hide or handle the feedback element.-
🔗 onSuccess.removeFeedbackFunction Hides the feedback element based on the display CSS property. -
🔗 onSuccess.hideFeedbackFunction Hides the feedback element based on the visibility CSS property. -
🔗 onSuccess.addClassFunction Add a class to feedback element classList. -
🔗 onSuccess.removeClassFunction Remove a class from feedback element classList.
-
-
🔗 validateFunction Starts the validating process by listening for changes on input fields.
Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your Form</title>
<script defer type="module" src="https://unpkg.com/fast-form-validator@latest/UMD/ffv.min.js"></script>
<script>
FFV.onEmail('email')
.onPassword('password', 4, 22)
.onDateOfBirth('dob', 18)
.setStrategyFor('username', atLeastSix)
.displayErrorsHere('showErrors')
.onSuccess.removeFeedback()
.onSubmitButton('submitBtn', hooray)
.validate();
</script>
</head>
<body>
<!-- form here -->
</body>
</html>
//Usage on Node, just require the module
npm i fast-form-validator
const { FFV } = require('fast-form-validator');onEmail
Validates email input fields based on the input field ID
Parameters
-
idString email input ID
Returns fast-form-validator
onPassword
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
Parameters
-
idString Password input ID -
minLengthNumber Min password character length -
maxLengthNumber Max password character length
Returns fast-form-validator
onDateOfBirth
Validates date input fields with a minimum age limit based on the input field ID
Parameters
Returns fast-form-validator
setStrategyFor
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
Example:
<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.usernameValue; 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);Parameters
Returns fast-form-validator
onSubmitButton
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.
Parameters
-
idString Submit button ID -
submitActionFunction Function to run when the user submits the form and the form has passed validation (no input errors)
Returns fast-form-validator
displayErrorsHere
Parameters
-
htmlIDString ID of the HTML container element that will display the error messages
Returns fast-form-validator
onSuccess.hideFeedback
Hides the element that contains the feedback messages using css visibility property
Returns fast-form-validator
onSuccess.removeFeedback
Hides the element that contains the feedback messages using css display property
Returns fast-form-validator
onSuccess.addClass
Adds a classname to the element that contains the feedback messages on successful validation
Returns fast-form-validator
onSuccess.removeClass
Removes a classname to the element that contains the feedback messages on successful validation
Returns fast-form-validator
validate
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
Purpose
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