Vanillajs-form-validator NPM

VanillaJS Form Validator

Form validation in pure JavaScript.

Installation

npm install vanillajs-form-validator --save

How to use

1 - Create HTML markup with data-required on <input /> tag:

<form id="form" novalidate>
  <div class="form-group">
    <input
      type="text"
      name="name"
      placeholder="Name"
      autocomplete="off"
      data-required>
  </div>

  <button type="submit">Submit</button>
</form>

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

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 <input /> tag:

<div class="form-group">
  <input
    type="email"
    name="name"
    placeholder="Name"
    autocomplete="off"
    data-required
    data-validate-rule="email">
</div>

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 <input /> tag:

<div class="form-group">
  <input
    type="text"
    name="name"
    placeholder="Only numbers"
    autocomplete="off"
    data-required
    data-validate-regex="\d+"
    data-validate-msg="Only numbers is required field">
</div>

Custom error message

Add data-validate-msg attribute on <input /> tag:

<div class="form-group">
  <input
    type="email"
    name="name"
    placeholder="Name"
    autocomplete="off"
    data-required
    data-validate-msg="Name is required field">
</div>

Examples

Basic

Click here to view demo.

<form id="form" novalidate>
  <div class="form-group">
    <input
      type="text"
      name="name"
      placeholder="Name"
      autocomplete="off"
      data-required>
  </div>

  <button type="submit">Submit</button>
</form>

<script src="dist/js/vanillajs-form-validator.js"></script>
<script>
  var form = document.getElementById('form')
  var config = {
    formSelector: form
  }

  var formValidate = new FormValidate(config)
  formValidate.init()
</script>

Rewriting HTML classes names

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 to view demo.

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()
  }
})