nojs-validator v1.0.13

nojs-validator

Description

This is a vanilla JS library that helps to automatize and reuse form validations using HTML input attributes to set rules. It's very easy to use and it will let you save validations coding time. Do it once, use it forever!

Or using npm

$ npm i nojs-validator

There are 4 events related to NoJsValidator: | Name | Execution | Example | |----|----|----| |before|This event is triggered before a field starts to check validations|const validator = new NoJsValidator({events:[before:'customFunction']})| |after|This event is triggered after a field checked all validations|const validator = new NoJsValidator({events:[after:'customFunction']})| |afterTrue|This event is triggered after a field checked all validations and is valid|const validator = new NoJsValidator({events:[afterTrue:'customFunction']})| |afterFalse|This event is triggered after a field checked all validations and is not valid|const validator = new NoJsValidator({events:[afterFalse:'customFunction']})|

Visualization

Validations rules can be all the same for most of the web forms. But the way to show errors or asserts is unique at every site. So, this is the only part that NoJsValidator gives all what is needed to make it more simplier. Some examples can be found at examples folder, but here is one to resume all. Lets create a custom NoJoValidate object to show errors:

First, validation rules must be defined at HTML form as attributes.

<form id="customForm">
    <input type="text" validate-empty="Please, insert an user" validate-min-length="4' validate-min-length-msg="At least, 4 characters must be entered" id="user">
    <span id="user-error"></span>
    <input type="password" validate-empty="Insert a password" id="password">
    <span id="password-error"></span>
    <button type="submit" onclick="return validator.isValid()">Submit</button>
</form>

Then, lets create custom functions to show or hide errors.

    function showError(event)
    {
        // This function will add an error class to a validated field
        // And show an error text obtained from NoJsValidateElement object
        const element = event.target;
        const id = element.getAttribute('id');
        const span = document.getElementById(id + '-error');
        element.classList.add('error-class');
        span.innerText = element.validate.validationText;
        span.style.display = 'block';
    }

    function hideError(event)
    {
        // This function will remove error class to a validated field
        // And hide error text from span
        const element = event.target;
        const id = element.getAttribute('id');
        const span = document.getElementById(id + '-error');
        element.classList.remove('error-class');
        span.style.display = 'none';
    }

Now, lets create a NoJsValidator for a custom form. Also, lets trigger form elements validations when keydown and change events occurs.

const validator = new NoJsValidator(
{
    forms: ['customForm'],
    validateOn: 'keydown,change',
    events: {
        afterFalse:'showError',
        afterTrue: 'hideError',
    }
});

Finally, customForm will be submited when passes all fields validations else will show errors using custom functions.

Method isValid() can be used whenever you want. Example:

function thatDoSomethingElse()
{
    // Do stuff
    if(validator.isValid())
    {
        // Do stuff
    }else{
        // Do stuff
    }
    // Do stuff
}