forceListOption

Forces an input's value to match the value of one of its datalist options, and then some.

Forces an input's value to match the value of one of its <datalist> options. It also provides opt-in functionality via data attributes to improve the default browser behavior for users.

• data-constrain - prevents submission of any form value that does not match a datalist option
• data-autotab - automatically focus the next focusable element in the DOM when valid data is entered
• data-autofill - whether or not to autofill the input if only one option matches the value
• data-fromstart - requires that matches are determined from the beginning of the entered input
• data-minlength - implements a minimum length requirement before autofill'ing the input field

View a basic demo.

Safari

Safari has minimal HTML5 input validation support. Most notably:

• it has a bug that allows for submission of a form with empty "required" <inputs>
• it does not support the <datalist> element

This module addresses the "required" bug, preventing the form from submitting with empty "required" inputs.

It will also convert <input> elements with a <datalist> into traditional <select> elements.

Installation

Install via npm:

$ npm i force-list-option --save

Usage

Requiring the module exposes a factory method that will create an Enforcer instance for each matching input in the DOM.

For use within a browserified bundle:

var forceListOption = require('force-list-option');
forceListOption(selector, options);

// designed to work well with defaults
forceListOption();

Or include the dist script on the page and call the now-global forceListOption function:

<script src="path/to/dist/script.js"></script>
<script>
  forceListOption(selector, options);	
</script>

Enforcer class

An instance of the enforcer class is created for each input. It provides the element-specific functionality as determined by its data attributes. To use the Enforcer constructor directly:

var Enforcer = require('force-list-option/lib/enforcer');
var enforcer = new Enforcer(element, options);

Documentation

Docs can be generated with JSDoc:

$ npm run docs