Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

force-list-option

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

force-list-option

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

  • 1.0.2
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

FAQs

Package last updated on 22 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc