mp-form-validator

It's just a simple form validator with hooks, custom rules, translations, overriding functions.

Bundle size: 7,57KB

In Development

Installation

npm i mp-form-validator

Usage

import Validator from "mp-form-validator"

or

import "mp-form-validator/bundle/validator.bundle.min.js"

or

<script src="//unpkg.com/[email protected]/bundle/validator.bundle.min.js"></script>

Next, create new Validator instance:

var v = new Validator({...params});

Params object:

property	value type	desc
debug	boolean	Show/hide debug messages in console
errorWrapperClass	string	Class name for errors wrapper
errorClass	string	Class name of single error
errorPosition	string ('before' or 'after')	Where place a error - before or after input
language	string	Lang code, if not found load default english.
constraints	object	Object of constraints
translations	object	Object of translations. Passed override language passed above.

Default params object:

var paramas = {
    debug: false,
    errorWrapperClass: 'form-errors-msgs',
    errorClass: 'single-error-msg',
    errorPosition: 'before',
    language: 'en',
    constraints: {},
    translations: {}
}

Methods

method	param	return	desc
validateField	field,forceValue	boolean	validate single field
validateForm	form	boolean	validate passed form
isFormValid	-	boolean	check if form is valid
removeAllErrorMessages	-	void	remove all added messages to form elements
getErrors	-	object	get all form errors

...where:

• field - DOM element
• form - DOM element
• forceValue - string/boolean - sometimes value of your field is changing with delay (e.g. react setState() method, field is binded with state value, but metod works async and value of DOM element will be one change before - NOW you can pass directly field value and all works fine :))

Constraints

By default, Validator don't know, what you want to validate - so, let's go!

Sample definition of constraints:

var constraints = {
    firstName: {
        required: true,
    },
    phone: {
        required: true,
        phone: true
    },
    email: {
        required: true,
        email: true
    }
};

var params = {
    ...params,
    constraints: constraints
}

firstName, phone, email are just name of form elements. Each form element must have a unique name.

Order of processing rules is just order of rules in your Constraint object - for field with name phone first will be 'required', second 'phone'.

...and rules

For now, we have only 8 rules available - yes - it's simple but powerful validator :>

ruleName	description
required	check if length of field > 0; if checkbox or radio, check if input group has any checked values
phone	check if have only digits and 9 numbers
email	simple check email
password	check if password has 1 lower, 1 upper, 1 numeric, 1 special and >= 8 chars
pesel	check for polish pesel number
regon	check for polish regon number
nip	check for polish nip number
idCard	check for polish idCard number

Custom rules

Yes - you can define your own logic for rules.

For example - you want to validate if entered text >= 10 characters.

First, define your rule:

var rules = {
    'text-length': {
        valid: function(value, field) {
          return value.length >= 10;
        }
    }
}

...and define translation (if invalid):

var translations = {
    Rules: {
        Errors: {
            'text-length': 'You should enter min. 10 chars or greater'
        }
    }
}

...and pass it to your params:

var params = {
    ...params,
    rules: rules,
    translations: translations
}

Translations

Create own translations object that should be like example below:

var translations = {
    Rules: {
        Errors: {
            "required": "This field is required.",
            "phone": "Incorrect phone format. Should be exact 9 digits.",
            "email": "Incorrect email address.",
        }
    }
}

and pass your object to params:

var params = {
    ...params,
    translations: translations
}

Hooks

Plugin have some hooks inside. You can override default hook, by passing to params object, a function definition:

functionName	params
onFieldValidateError	field,value,errorMessages
onFieldValidateSuccessful	field, value
onFormValidationError	form, errorMessages
onFormValidationSuccessful	form
beforeFieldValidation	field
afterFieldValidation	field
beforeFormValidation	form
afterFormValidation	form

...where:

• field - DOM element
• form - DOM element
• value - string/boolean with field value
• errorMessages - object with errors, where key is a field name, ale value is an array of validation messages

Sample usage:

var params = {
    ...params,
    onFormValidationError: function(form, errorMessages) {
      form.querySelector('.btn-submit').classList.add('disabled')
    },
    onFormValidationSuccessful: function(form) {
      form.querySelector('.btn-submit').classList.remove('disabled')
    }
}

Notice:

• There's no auto-validation on submit, you have full control over when & how. More in index.html

Sorry for everything - it's my first package, if you found a bug, report - thanks!

License

ISC