https://github.com/scriptex/dator
Frontend forms validator
https://github.com/scriptex/dator
form-validation form-validator
Last synced: 10 months ago
JSON representation
Frontend forms validator
- Host: GitHub
- URL: https://github.com/scriptex/dator
- Owner: scriptex
- License: mit
- Created: 2015-11-10T15:38:48.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2025-03-03T09:03:23.000Z (11 months ago)
- Last Synced: 2025-03-18T04:42:42.996Z (10 months ago)
- Topics: form-validation, form-validator
- Language: TypeScript
- Homepage: https://dator.atanas.info
- Size: 1.76 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/scriptex/dator)
[](https://github.com/scriptex/dator/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/dator/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/dator&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-dator-master)
[](https://www.codefactor.io/repository/github/scriptex/dator)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/dator/)
# Dator. Vali-Dator
> Intuitive frontend forms validator based on HTML5 attributes and a tiny bit of JavaScript.
## Visitor stats
## Code stats
## About
There are a lot of form validators out there. This one aims at intuitive API and relies on extensive usage of HTML data-\* attributes.
It's important to note that in order to use the validation, the `required` attribute must be present on your HTML element.
## Demo
[Here](https://dator.atanas.info) is a demo showing how to use the validator and all built-in validation types:
## Install
```sh
npm i dator
# or
yarn add dator
```
or include it from unpkg.com
```html
```
## Usage
In your JavaScript file:
```javascript
import { Validator } from 'dator';
const myForm = document.querySelector('form');
const datorSettings = {}; // see below for more details
const datorCustomTypes = {}; // see below for more details
const formValidator = new Dator(myForm, datorSettings, datorCustomTypes);
```
In your HTML file:
```html
```
The constuctor accepts three arguments:
1. DOM element for the form that needs to be validated (Required)
2. Object with settings (Optional) - more below
3. Object with custom validation types - more below
## Settings
```javascript
// These are the settings and their default values
const datorSettings = {
validClass: 'is--valid', // The CSS classname that will be added to a valid form element
errorClass: 'is--invalid', // The CSS classname that will be added to an invalid form element
validatedClass: 'is--validated', // The CSS classname that will be added to the validated form
watch: true, // If the validation should be applied "as-you-type"
classHolder: null, // The CSS classname of the element that should receive the `validClass` and `invalidClass`
beforeValidate: null, // A function to run before the actual form submission
onSubmit: null, // A function to run during the actual form submission
afterValidate: null // A function to run after the actual form submission
};
```
## Validation types
There are several built-in validation types:
- name
- zip
- presence
- email
- phone
- address
- integer
- float
- credit-card
- cvc
All of these validation types represent a regular expression which is used to test the value of the form element against to.
In order to add more validatior types, use the third constructor argument as shown above.
For example, if you need to add a new `zip` type:
```javascript
const datorCustomTypes = {
zip: /^\d{4}$/ // Change from 5 digits to 4 digits
};
```
## LICENSE
MIT
---
Connect with me:
---
Support and sponsor my work:
