input-validator.js
Advanced tools
Readme
Input Validator is a modern lightweight library without dependencies for the data validation from single <input /> tag.
View demo here
Install with Bower:
bower install input-validator.js
Or clone from Github:
git clone https://github.com/rtivital/validate.git
Include library before closing <body> tag
<body>
...
<script src="input-validator.min.js"></script>
</body>
Grab the <input /> tag from the DOM tree and start the data validation
var emailInput = new Validator.init(document.getElementById('email'), {
rules: {
min: 5,
max: 20,
match: 'email'
},
onError: function() {
var parentNode = this.element.parentNode;
parentNode.classList.add('has-error');
parentNode.classList.remove('has-success');
parentNode.querySelector('.help-block').textContent = 'Error: ' + this.message;
},
onSuccess: function() {
var parentNode = this.element.parentNode;
parentNode.classList.add('has-success');
parentNode.classList.remove('has-error');
parentNode.querySelector('.help-block').textContent = 'Everything is valid!';
}
});
Validator.init function accepts consfiguration object like this one:
{
rules: {
min: 5,
max: 20,
match: 'email'
},
onError: function() {
console.log('Error' + this.message);
},
onSuccess: function() {
console.log('Everything is valid!');
}
}
These are minimum set of values. Additionally you can pass in messages and regExps objects to replace predefined settings or add your own testing rules:
// Defaults:
{
regExps: {
email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
url: /^((https?):\/\/(\w+:{0,1}\w*@)?(\S+)|)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/,
numbers: /^\d+(\.\d{1,2})?$/,
digit: /[0-9]*$/,
letters: /[a-z][A-Z]*$/
},
messages = {
required: 'This field is required',
min: 'This field should contain at least %rule% characters',
max: 'This field should not contain more than %rule% characters',
match: 'This field shold countain a valid %rule%'
}
}
Generally, you want the validation to occur with certain events (e.g. click, keyup, etc.). In this case consider this code:
var onError = function() {
var parentNode = this.element.parentNode;
parentNode.classList.add('has-error');
parentNode.classList.remove('has-success');
parentNode.querySelector('.help-block').textContent = 'Ошибка: ' + this.message;
};
var onSuccess = function() {
var parentNode = this.element.parentNode;
parentNode.classList.add('has-success');
parentNode.classList.remove('has-error');
parentNode.querySelector('.help-block').textContent = 'Ура! Всё прошло хорошо, ваши данные полность валидные.';
};
var emailInput = new Validator.init(document.getElementById('email'), {
rules: {
min: 5,
max: 20,
match: 'email'
}
onError: onError,
onSuccess: onSuccess
});
document.getElementById('validate-btn').addEventListener('click', function(e) {
e.preventDefault();
emailInput.validate();
});
Validator.fn.required returns if the value contains at least one symbol, except for whitespace
validate(document.getElementById('email'), {
rules: {
required: true
}
});
Validator.fn.min returns if the value length is more than provided length
validate(document.getElementById('email'), {
rules: {
min: 8
}
});
Validator.fn.max returns if the value length is less than provided length
validate(document.getElementById('email'), {
rules: {
max: 20
}
});
Validator.fn.match returns if the value matches certain pattern. Available patterns:
validate(document.getElementById('email'), {
rules: {
match: 'email'
}
});
You can also define tou regular expression in config object and then use it:
validate(document.getElementById('email'), {
regExps: {
base64: /[^a-zA-Z0-9\/\+=]/i
},
rules: {
match: 'base64'
}
});
onError callback, which you define in config object, will be called every time Validator.fn.validate method fails:
validate(document.getElementById('email'), {
rules: {
min: 8,
max: 50,
match: 'email'
},
onError: function() {
console.log('Error: ' + this.message);
}
});
onSuccess callback, which you define in config object, will be called every time Validator.fn.validate method passed:
validate(document.getElementById('email'), {
rules: {
min: 8,
max: 50,
match: 'email'
},
onSuccess: function() {
console.log('Everything is valid');
}
});
You can create your own messages with simple template variables %rule% and %data%:
validate(document.getElementById('email'), {
rules: {
min: 8,
max: 50,
match: 'email'
},
messages: {
min: 'The value of this field shold be at least %rule% characters long. Value %data% does\'t fit well!',
max: 'The value of this field shold not be longer than %rule% characters. Value %data% does\'t fit well!',
match: '%data% is not a valid %rule% address'
}
});
%data% refers to the current value from input field. %rule% refers to current param (e.g. 8 at min, 50 at max and email at match).
Input validator uses Object.keys() ES5 feature.
Browser Support:
FAQs
modern lightweight library without dependencies for data validation from single input tag.
The npm package input-validator.js receives a total of 1 weekly downloads. As such, input-validator.js popularity was classified as not popular.
We found that input-validator.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.