Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

form-handler

2.2.1 • Public • Published

form-handler

Give this constructor a set of form field elements and it will allow you to run valiadation, read the values, enable, disable, reset, and more.

To get started

CommonJS

$ npm install form-handler
var FormFields = require('form-handler');

Browser Global

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="TheC2Group/event-handler.js"></script>
<script src="iife/form-handler.js"></script>

Initialize

var fields = new FormFields($(':input').toArray());

Customizing

Data attributes on the form fields do all the work of customizing the validation per item.

// required name
<input name="name" type="text" data-validation="required">
 
// required and valid email
<input name="email" type="text" data-validation="required email">

List of validation options:

  • required
  • blank
  • email
  • checked
  • unchecked

*required and blank are essentially the same thing as checked and unchecked. a checkbox's values can only be 'on' and ''.

Use the regex attribute for more control.

// limit to only numbers
<input name="age" type="text" data-regex="^[0-9]*$">
 
// must contain a weekday (of course, this should be a `select`)
<input name="weekday" type="text" data-regex="^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)$" data-regex-flags="i">

Force an input to match another.

<input name="email" type="text">
<input name="confirm-email" type="text" data-match="email">

Works on select, type="checkbox", and type="radio". For radio groups, apply the data attributes to the first radio element.

API

All variables in code examples continue from previous examples.

// get any field instance by name
var email = fields.field['email'];
 
// get an array of fields
console.log(fields.fields.length); // 6

List of arrays on fields:

  • texts
  • selects
  • checkboxes
  • radioGroups
  • fields

List of methods on fields:

  • getValue(name, refresh)
  • refresh() // "refresh" always refers to reseting the value property from the DOM element value.
  • disable()
  • enable()
  • readonly()
  • editable()
  • validate(refresh, dirty) // returns array of invalid fields
  • reset()
  • read(refresh)
  • changes(refresh)
  • startOver(reset) // all fields are back to pristine and value equals original.

List of properties on field instance email:

  • type
  • $el
  • els
  • el
  • form
  • name
  • disabled
  • isReadonly
  • value
  • original
  • isPristine
  • status
  • fails
  • isValid

List of methods on field instance email:

  • refresh()
  • validate(dirty)
  • getValue(refresh)
  • setValue(value)
  • disable()
  • enable()
  • readonly()
  • editable()

Validation

All validation is reflected on the field element on the data-status attribute.

Before the user has changed any values.

<input name="name" type="text" data-validation="required" data-status="pristine">

After the user has updated the field.

<input name="name" type="text" data-validation="required" value="Brian" data-status="valid">

If "Brian" is removed or validation(true) is called before user input...

<input name="name" type="text" data-validation="required" value="" data-status="invalid required">

The types of validation errors are always listed after "invalid".

<input name="confirm-email" type="text" data-validation="required email" data-match="email" data-regex="^{5,30}$" value="" data-status="invalid required email match regex">

Use data-status to style the input. An easy way to add error messages is to use this CSS:

[data-status~="invalid"] ~ .errorMessage.all,
[data-status~="required"] ~ .errorMessage.required,
[data-status~="email"] ~ .errorMessage.email,
[data-status~="regex"] ~ .errorMessage.regex,
[data-status~="match"] ~ .errorMessage.match {
    visibility: visible;
}

License

MIT © The C2 Group

Install

npm i form-handler

DownloadsWeekly Downloads

9

Version

2.2.1

License

MIT

Unpacked Size

372 kB

Total Files

20

Last publish

Collaborators

  • avatar