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 --saveDev

Yarn:

yarn add @djadrianof/vform -D

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

• Example 01 - Initialize library and basic usage
• Example 02 - Checkbox and Radio Button
• Example 03 - Validate with Regex Pattern Attribute

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+