Formlidate

Formlidate is a javascript plugin that makes validating html forms less painless for frontend developers. It ships with many core validation rules and also gives you room to add customized validation rules. It handles error message display and handles validation when a change event is fired.

Installation

Via NPM

npm i @kodnificent/formlidate

Via CDN

<script src="https://unpkg.com/@kodnificent/formlidate@1"></script>

<!-- Minified version (Production use) -->
<script src="https://unpkg.com/@kodnificent/formlidate@1/dist/formlidate.min.js"></script>

Quick Start

<form id="my-form">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" data-rules="required|alpha_num">
    <span data-username-feedback></span>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" data-rules="required|email">
    <span data-email-feedback></span>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="text" id="password" name="password" data-rules="required">
    <span data-password-feedback></span>
  </div>
  <div>
    <button>submit</button>
  </div>
</form>

<script>
  const validator = new Formlidate('#my-form');
</script>

Validating a form

To validate a HTML Form you have to make a new instance the Formlidate class and optionally pass the form selector and options as parameters.

When instantiating the class without any parameters, Formlidate will use 'form' as the default selector and expect rules to be written inline.

const validator = new Formlidate();

// is equivalent to
const validator = new Formlidate('form', {});

Specifying the target selector

By default, Formlidate uses 'form' as the Selector if no value is present. You can use any valid element selector or an HTMLElement.

Using Selector

const validator = new Formlidate('.my-form-class');

Using HTMLElement

const el = document.querySelector('.my-form-class');
const validator = new Formlidate(el);

Conifguration Options

The second paramater of the Formlidate constructor should be an object containing the following configuration options.

| Key | Type | Description | Default | |----------|------------|---------------------------------------------------|---------| | rules | object | An object containing rules for each form field. | null | | messages | object | An object containing messages that will be thrown when a field fails validation for a rule | null | | fieldSelector | string | Used for selecting target fields in the HTML form when rules are defined in the options | [name=:attribute] | | feedbackSelector | string | Used for selecting the target element when error messages for each field will be placed | [data-:attribute-feedback] | | beforeValidate | function | Callback to call before validating the form | function | | onInvalid | function | Callback to call when there is a validation error on a form | function | | onChange | function | Callback to call when a field's value changes | function | | validated | function | Callback to call after the form passes validation | function |

Field Rules

You can specify validation rules for a form field directly on the field element by defining a data-rules attribute or in the configuration option by defining a rules object.

Inline rules

<form>
  <div>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" data-rules="required|email">
    <span data-email-feedback></span>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="text" id="password" name="password" data-rules="required">
    <span data-password-feedback></span>
  </div>
  <div>
    <button>submit</button>
  </div>
</form>

<script>
  const validator = new Formlidate();
</script>

Conifguration rules

<form id="my-form">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <span data-username-feedback></span>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email">
    <span data-email-feedback></span>
  </div>
  <div>
    <button>submit</button>
  </div>
</form>

<script>
  const validator = new Formlidate('#my-form', {
    rules: {
      username: 'required|alpha_num', // rules can be separated with the pipe character
      email: ['required', 'email', (value, data, attribute) => true] // or can be placed in an array
    }
  });
</script>

Core rules

Formlidate ships with some core rules that contains most of the validation rules we apply regularly.

| key | Description | |----------------|--------------------------------------------------------------------------------| | accepted | The field under validation must be accepted. Accepted values are yes, on, 1 or true. This rule comes in handy when validating a terms and condition field. | | alpha | The field must contain only alphabets. | | alpha_dash | The field must contain only alphanumeric characters as well as dashes and underscores. | | alpha_num | The field must contain only alphanumeric characters. | | array | The field must be an array. | | boolean | The field must be able to cast to a boolean. Accepted values are 1, 0, true, false, '1', '0', 'true', 'false'. | | contains:param1,param2 | The field under validation must contain any of the given parameters. | | date | The field under validation must be a validate date. | | different:field | The field under validation must have a different value from another field. E.g A secondary_email field might have this rule different:email. | | digits:length | The field under validation must be a digit with a specific length. E.g a pin field might have this rule digits:4 to validate a 4 digit pin. | | digits_between:min,max | The field under validation must be a digit and have a length between the specified min and max. | | email | The field under validation must be a valid email address. | | ends_with:value1,value2,... | The field under validation must end with any of the given list of values. E.g ends_with:.com,.io,.com.ng. | | file | The field under validation must be a valid file. | | gt:someOtherField | The value of the field under validation must be greater than another field. | | gte:someOtherField | The value of the field under validation must be greater than or equal to another field. | | in:value1,value2,... | The field under validation must be included in any of the given list of values. | | lt:someOtherField | The value of the field under validation must be less than another field. | | lte:someOtherField | The value of the field under validation must be less than or equal to another field. | | regex:pattern | The field under validation must match the regular expression pattern. Make sure that you escape special characters. | | required | The field under validation must be present and not null or undefined or an empty string. | | required_if:otherField,value | The field under validation is required if another field has a specific value. | | same:field | The field under validation must have the same value as another field. E.g a confirm_password field may have this rule same:password | | starts_with:value1,value2,... | The field under validation must start with any of the given list of values. E.g starts_with:https://facebook.com,https://fb.com |

Resources

• Changelog
• Upgrade Guide
• Contributing Guide
• Code of Conduct

Credits

Formlidate is inspired by Laravel's validation feature.

Liecense

MIT