popup-validation
v3.0.3
Published
Pure JavaScript/CSS library for validating DOM input fields
Downloads
39
Maintainers
antvallapReadme
popup-validation
Pure JavaScript/CSS library for validating DOM input fields
Install
npm install popup-validation --saveRead API
Usage
HTML
<link href="validation.min.css" rel="stylesheet">
<script src="validation.min.js"></script>
<div>
<label for="email">Email:</label>
<input type="email" id="email" class="validate"
data-validate="required,email" />
</div> JS
Initialization
- Track all the input fields inside of the
<body>
validation.init();- Track all the input fields inside of a DOM container or a
<form>.Submitevent will be prevented if there are any errors
validation.init("#myForm");- Set options: trigger events (when popups should be shown). ["change", "paste", "blur", "keyup"] by default.
validation.init("#myForm", {
events: ["change", "paste", "keyup"]
});Usage
// Show errors
validation.highlight();
// Hide all errors
validation.hideAll();
// Check if all the input fields inside of a container are valid (body by default)
validation.isValid(); // returns true or false
// isValid() + highlight()
validation.validate(); // returns true or false
// Show a custom popup message on any DOM element
validation.show(el, message);
// Hide the popup message from the DOM element
validation.hide(el);Custom Class Validation
Some services like Braintree use iframes to control the inputs on a page. That also can be useful if some javascript logic sets and removes a certain class to/from a div or input field that indicates that the field is not validated.
HTML
<div id="my_id">
Click at me to toggle custom class validation
</div> JS
validation.addClassValidation("#my_id", ".my-class-invalid", 'Validation Message');
// Test
document.getElementById("my_id").addEventListener("click", e => {
e.target.classList.toggle("my-class-invalid");
});Predefined Rules
- required
- emails ("," or ";" delimiter)
The set of rules can be easily extended. Please take a look at the example
API
validation.init(el, options) => self
Initialize the validation fields inside of the el container. If el is a <form> element then the submit event will be prevented if there are any errors
Returns: object - Self validation instance for chain calls
| Param | Type | Description |
| --- | --- | --- |
| el | Element | Container or <form> Element |
| options | Object | [Optional] Set of the properties |
Default Options
{
events: ["change", "paste", "blur", "keyup"]
}Affects all input fields with validate class
data-validate attr can contain the list of the rules
Example:
<input class="validate" data-validate="required" />
<input type="email" class="validate" data-validate="required,email" />validation.destroy(el) => self
Deactivate the validation fields inside of the el container
Returns: object - Self validation instance for chain calls
| Param | Type | Description |
| --- | --- | --- |
| el | Element | Container or <form> Element |
validation.hideAll(el) => self
Hide all errors inside of the el container
Returns: object - Self validation instance for chain calls
| Param | Type | Description |
| --- | --- | --- |
| el | Element | Container or <form> Element |
validation.highlight(el) => self
Highlight all errors inside of the el container
Returns: object - Self validation instance for chain calls
| Param | Type | Description |
| --- | --- | --- |
| el | Element | Container or <form> Element |
validation.isValid(el) => boolean
Check if all input fields inside of the el container are valid
Returns: boolean - True if all input fields inside of the container are valid
| Param | Type | Description |
| --- | --- | --- |
| el | Element | Container or <form> Element |
validation.validate(el) => boolean
Validate all input fields inside of the el container
Returns: boolean - True if all input fields inside of the container are valid
| Param | Type | Description |
| --- | --- | --- |
| el | Element | Container or <form> Element |
validation.show(el, message) => void
Show a custom popup message on a DOM element
| Param | Type | Description | | --- | --- | --- | | el | Element | DOM element | | message | string | Custom message |
validation.hide(el) => void
Hide the shown custom popup message from the DOM element
| Param | Type | Description | | --- | --- | --- | | el | Element | DOM element |
validation.rules object
The set of the predefined rules
Rule signature
el => boolean
| Param | Type | Description | | --- | --- | --- | | el | Element | input field |
Returns: boolean - True if the field is validated
Example of extending rules
JS
validation.rules["integer"] = {
message: "Value is not an integer",
method: el => {
return el.value === "" || /^-?\d+$/.test(el.value);
}
}HTML
<input class="validate" data-validate="required,integer" />validation.addClassValidation(target, selector, message) => self
Add class validation. For external libraries that can set/remove className of an element. For instance, braintree-hosted-fields-invalid class is set by braintree client library when iframe with the input field detects an error, More info here: https://developers.braintreepayments.com/guides/hosted-fields/styling/javascript/v2
Returns: object - Self validation instance for chain calls
| Param | Type | Description | | --- | --- | --- | | target | string|Element | Target DOM element where popup should be shown on | | selector | string | Selector that indicates that the field is invalid | | message | string | Optional. "Invalid" by default |
Browsers support made by godban
| IE / Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Chrome for Android | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | IE9+ | Any | Any | Any | Any | Any | Any
License
MIT