Novelty Plastic Moustache

    fast-form-validator

    1.1.13 • Public • Published

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

    Table of Contents

    fast-form-validator

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

    Type: Object

    Properties

    • 🔗 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.

    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

    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

    • id String Password input ID
    • minLength Number Min password character length
    • maxLength Number 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

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

    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

    Example:

    <input type="text" class="form-control" id="username" />
    FFV.setStrategyFor("username", atLeastSix);
    //returns the value of the input field to be tested
    FFV.usernameValue;
    //sets this message in an array that will be shown if the input field
    FFV.usernameError = "username must be...";

    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";
      }
    }
    //Usage: passing only the function reference
    FFV.setStrategyFor("username", atLeastSix);

    Parameters

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

    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

    • 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

    displayErrorsHere

    Parameters

    • htmlID String 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

    Here

    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

    Install

    npm i fast-form-validator

    DownloadsWeekly Downloads

    0

    Version

    1.1.13

    License

    MIT

    Unpacked Size

    228 kB

    Total Files

    35

    Last publish

    Collaborators

    • clickwithclark