@kodnificent/formlidate v1.0.0

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.

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.

Resources

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

Credits

Formlidate is inspired by Laravel's validation feature.

Liecense

MIT