Skip to content

Latest commit

 

History

History
211 lines (169 loc) · 8.32 KB

README.md

File metadata and controls

211 lines (169 loc) · 8.32 KB
Raw

alt text

VForm

A dependency-free vanilla Javascript form validation using Constraint Validation API. Just use HTML5 form fields based in validation attributes and that's it, the library resolve all!

See more about HTML validation attributes in: MDN - Constraint validation

Install

NPM:

npm i @djadrianof/vform

Yarn:

yarn add @djadrianof/vform

Setup

Import the library in your code:

import VForm from "@djadrianof/vform";

Or get the script directly from unpkg.com

<script src="https://unpkg.com/@djadrianof/vform"></script>

Usage

First initialize the library:

document.addEventListener("DOMContentLoaded", event => {
  const Validation = new VForm(".form", {
    classes: {
      errorElement: "field-error"
    },
    events: {
      onInitializedSuccess: onInitializedSuccessForm,
      onInitializedError: onInitializedError,
      onValid: onValid,
      onBlurFieldChecked: onBlurFieldChecked,
      onChangeFieldChecked: onChangeFieldChecked,
      onSubmit: onSubmit
    }
  });
});

Live Examples

Set your form element

Obs: Set the attribute noValidate in your form to prevent default browser validation.

  <form class="form" noValidate>
    <label data-field-container="name">
      <input
        type="email"
        name="name"
        required
        class="foo"
        minlength="4"
        data-empty-message="Empty message"
        data-error-message="Error message"
        data-length-message="Length message"
      />
      <span class="field-error"></span>
    </label>
  </form>

Options

Is possible set some options like css classes and events:

Classes

Classes are helpful for indicate the state of field or form.

const Validation = new VForm(".form", {
  classes: {
    valid: "field-valid",
    invalid: "field-invalid",
    formValid: "form-valid",
    errorElement: "error-element"
  }
});
Name Description
valid class that will be set in field after be validated
invalid class that will be set in field after check the status and return invalid
formValid class that will be set in form when is valid
errorElement class of element that is render the error message

Events

Events are helpful to get the status of form and fields.

const Validation = new VForm(".form", {
  events: {
    onInitializedSuccess: onInitializedSuccessForm,
    onInitializedError: onInitializedError,
    onSubmit: onSubmit,
    onReset: onReset,
    onValid: onValid,
    onFocus: onFocus,
    onBlurFieldChecked: onBlurFieldChecked,
    onChangeFieldChecked: onChangeFieldChecked,
    execBeforeSubmit: execBeforeSubmit
  }
});
Name Description
onInitializedSuccess Event is called if library is initialized with success. This method return the form DOM element
onInitializedError Event is called if library is not initialized
onSubmit Event is called when the form is submited. If form is valid, the method return a promise with a object that contains the fields
onReset Event is called when the form is reseted
onValid Event is called when the form stay valid
onFocus Event is called when the field is invalid. The method return the field element
onBlurFieldChecked Event is called when the blur is executed and the field is valid. The method return the field element
onChangeFieldChecked Event is called after the field element stay valid and in onChange listener. The method return the field element
execBeforeSubmit Is executed before the submit of form. This method should return a promise

Data Attributes

Data attributes helps you to control and customize the validation.

<label data-field-container="name">
    <input
        type="email"
        name="name"
        required
        class="foo"
        minlength="4"
        data-empty-message="Empty message"
        data-error-message="Error message"
        data-length-message="Length message"
    />
    <span class="field-error"></span>
</label>

With a reference error element

<label data-field-container="age">
    <input
        type="text"
        name="age"
        required
        class="foo"
        minlength="4"
        data-empty-message="Empty message"
        data-error-message="Error message"
        data-length-message="Length message"
    />
    <span class="field-error" data-reference-error="age"></span>
</label>
Name Description
data-field-container This data indicate a container for field. The value should be the same value of name attribute of field element.
data-error-message Message for indicate that field contains error
data-empty-message Message for indicate that field is empty
data-length-message Message for indicate that field needs contain a minimum size of characteres based on minlength attribute
data-reference-error This data indicate a different error element to show a error (use the same name of element that you need reference)

Methods

Are some helpful methods that you can access directly via library instance.

Name Description
update Is helpful if needs insert a new field dynamically in form or needs remove some field of form. This method will register the listeners and set validations for new fields.
getFieldsValues Return a promise that contain a object with fields values
setValidField Indicate that a field is valid
setInValidField Indicate that a field is not valid
setErrorMessage Set a error message dynamically for a field

Browser Support

  • IE 11+
  • Chrome 49+
  • Safari 10+
  • IOS Safari 10+
  • Firefox 29+