popup-validation
Pure JavaScript/CSS library for validating DOM input fields
Install
npm install popup-validation --save
Read API
Usage
HTML
Email:
JS
Initialization
- Track all the input fields inside of the
<body>
validation;
- Track all the input fields inside of a DOM container or a
<form>
.Submit
event will be prevented if there are any errors
validation;
- Set options: trigger events (when popups should be shown). ["change", "paste", "blur", "keyup"] by default.
validation;
Usage
// Show errorsvalidation; // Hide all errorsvalidation; // Check if all the input fields inside of a container are valid (body by default)validation; // returns true or false // isValid() + highlight()validation; // returns true or false // Show a custom popup message on any DOM elementvalidation; // Hide the popup message from the DOM elementvalidation;
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
Click at me to toggle custom class validation
JS
validation; // Testdocument;
Predefined Rules
- required
- emails ("," or ";" delimiter)
The set of rules can be easily extended. Please take a look at the example
API
self
validation.init(el, options) => 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:
self
validation.destroy(el) => 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 |
self
validation.hideAll(el) => 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 |
self
validation.highlight(el) => 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 |
boolean
validation.isValid(el) => 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 |
boolean
validation.validate(el) => 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 |
void
validation.show(el, message) => Show a custom popup message on a DOM element
Param | Type | Description |
---|---|---|
el | Element |
DOM element |
message | string |
Custom message |
void
validation.hide(el) => Hide the shown custom popup message from the DOM element
Param | Type | Description |
---|---|---|
el | Element |
DOM element |
object
validation.rules 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
validationrules"integer" = message: "Value is not an integer" { return elvalue === "" || /^-?\d+$/; }
HTML
self
validation.addClassValidation(target, selector, message) => 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 |
selector | string |
Selector that indicates that the field is invalid |
message | string |
Optional. "Invalid" by default |
godban
Browsers support made byIE / Edge |
Firefox |
Chrome |
Safari |
Opera |
iOS Safari |
Chrome for Android |
---|---|---|---|---|---|---|
IE9+ | Any | Any | Any | Any | Any | Any |
License
MIT