Simple and minimal form validation plugin ✌️
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
Validator-noUMD.js
Validator-noUMD.min.js
Validator.js
Validator.min.js
package.json

README.md

SIMPLEVALIDATE (a.k.a VALIDATE3000)

Simple form validation that also exposes your user's shortcomings :D

GET VALIDATING! -> DEMO

Features

  • Validates all types of inputs
  • Also validates emails and URL formatting
  • Outputs which inputs are invalid
  • Returns a promise

How to

npm install simplevalidate or just include the appropriate scripts.

Simple: pass in a form element into Validate(). It will loop through all inputs and selects and returns a promise. If there's an error, then it will return the names of the inputs as an array; otherwise it will return the form data as an object.

If there's an error it will return an object like so: try it yourself, console log the errors!

    {
        names: ["error-input-name1", "error-input-name2"],
        inputs: [inputDomNode, inputDomNode]
    }

Example usage

    <!-- You can specify the following with data attributes:
        data-minlength -> minimum number of characters
        data-maxlength -> maximum number of characters
        data-name -> The label/name of the error, otherwise [name] will be used
        required -> if omitted, ignore field validation

        NOTE:
        add `novalidate` to form to disable native html5 validation
     -->
    <fieldset>
        <label>Some input label</label>
        <input type="text" name="input" data-name="Some input" data-minlength="5" data-maxlength="15">
    </fieldset>
    const form = document.querySelector('form');
    const submit = form.querySelector('button');
    const errors = form.querySelector('.errors');

    submit.addEventListener('click', function(event) {
        event.preventDefault();

        Validate(form)
            .then((data) => {
                // VALID! Do stuff here like...
                // AJAX away the data, etc.
                fetch(url, {
                    method: 'POST',
                    body: JSON.stringify(data)
                });
            })
            .catch((errors) => {
                // INVALID! You get back an object with arrays of
                // invalud input names and elems
                for (const input of errors.inputs) {
                    input.classList.add('is-error');

                    // add some class to the parent <fieldset>
                    input.parentElement.classList.add('whoa-this-input-got-an-error');
                }

                document.querySelector('errorMsg').innerHTML = errors.names.join(', ');
            });
    });