Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ederssouza/vanillajs-form-validator

Form validation in pure JavaScript
https://github.com/ederssouza/vanillajs-form-validator

form form-validation forms html pure-javascript regex validation validation-library validator vanilla-js

Last synced: 3 months ago
JSON representation

Form validation in pure JavaScript

Host: GitHub
URL: https://github.com/ederssouza/vanillajs-form-validator
Owner: ederssouza
License: mit
Created: 2018-09-17T12:54:20.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-09-03T22:41:54.000Z (over 1 year ago)
Last Synced: 2024-10-30T14:55:04.512Z (3 months ago)
Topics: form, form-validation, forms, html, pure-javascript, regex, validation, validation-library, validator, vanilla-js
Language: JavaScript
Homepage: https://ederssouza.github.io/vanillajs-form-validator
Size: 120 KB
Stars: 7
Watchers: 3
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

README

        # VanillaJS Form Validator

[![Build Status](https://travis-ci.org/ederssouza/vanillajs-form-validator.svg?branch=master)](https://travis-ci.org/ederssouza/vanillajs-form-validator) [![Coverage Status](https://coveralls.io/repos/github/ederssouza/vanillajs-form-validator/badge.svg)](https://coveralls.io/github/ederssouza/vanillajs-form-validator) [![npm version](http://img.shields.io/npm/v/vanillajs-form-validator.svg)](https://npmjs.org/package/vanillajs-form-validator) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/ederssouza/vanillajs-form-validator/raw/master/LICENSE.md)

Form validation in pure JavaScript.

## Installation

```bash

npm install vanillajs-form-validator --save

```

## How to use

1 - Create HTML markup with `data-required` on `` tag:

```html

  


    

  


  Submit

```

2 - Create validator instance and call `.init()` method:

```javascript

var form = document.getElementById('form')

var formValidate = new FormValidate({

  formSelector: form

})

formValidate.init()

```

### Options

#### Properties

|name|type|defalt value|

|:-|:-|:-|

|`formSelector`|`HTML DOM Element`||

|`formGroupSelector`|`String`|`form-group`|

|`validClass`|`String`|`valid`|

|`invalidClass`|`String`|`invalid`|

|`msgClass`|`String`|`input-msg`|

#### Methods

|name|action|

|:-|:-|

|`FormValidate.trigger()`|Force trigger validation event|

|`FormValidate.checkValidFields()`|Check if form required fields was validated|

|`FormValidate.reset()`|Clear form values and `valid` and `invalid` classes|

|`FormValidate.getValues()`|Get form values and return an object|

#### Validations rules attribute

Add `data-required` attribute on `` tag:

```html



  



```

|name|validation type|

|:-|:-|

|`data-validate-rule="email"`|Check valid e-mail|

|`data-validate-rule="phone"`|Check valid Brazil phone number|

|`data-validate-rule="cpf"`|Check valid CPF|

|`data-validate-rule="rg"`|Check valid RG|

|`data-validate-rule="cep"`|Check valid CEP|

|`data-validate-rule="url"`|Check valid CEP|

#### Regex attribute

Add `data-validate-regex` attribute on `` tag:

```html



  



```

#### Custom error message

Add `data-validate-msg` attribute on `` tag:

```html



  



```

## Examples

### Basic

[Click here](https://ederssouza.github.io/vanillajs-form-validator/samples/basic.html) to view demo.

```html

  


    

  


  Submit

  var form = document.getElementById('form')

  var config = {

    formSelector: form

  }

  var formValidate = new FormValidate(config)

  formValidate.init()

```

### Rewriting HTML classes names

```javascript

var form = document.getElementById('form')

var formValidate = new FormValidate({

  formSelector: form,

  inputGroupClass: 'uk-margin',

  validClass: 'uk-form-success',

  invalidClass: 'uk-form-danger',

  msgClass: 'input-msg'

})

formValidate.init()

```

### Full example

[Click here](https://ederssouza.github.io/vanillajs-form-validator/samples/index.html) to view demo.

```javascript

var form = document.getElementById('form')

var config = {

  formSelector: form,

  inputGroupClass: 'uk-margin',

  validClass: 'uk-form-success',

  invalidClass: 'uk-form-danger',

  msgClass: 'input-msg'

}

var formValidate = new FormValidate(config)

formValidate.init()

form.addEventListener('submit', () => {

  // check valid form

  var isValid = formValidate.checkValidFields()

  if (isValid) {

    // get input values

    console.table(formValidate.getValues())

    // reset form

    formValidate.reset()

  }

})

```

## Contributing

Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/ederssouza/vanillajs-form-validator/tags).

## Authors

See also the list of [contributors](https://github.com/ederssouza/vanillajs-form-validator/contributors) who participated in this project.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details