You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@open-wc/form-helpers

Package Overview
Dependencies
Maintainers
3
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@open-wc/form-helpers

Helpers for working with forms


Version published
Weekly downloads
5.7K
decreased by-13.01%
Maintainers
3
Created
Weekly downloads
 

Readme

Source

@open-wc/form-helpers

A collection of form control related utilities for working with forms.

Install

# npm
npm install @open-wc/form-helpers

# yarn
yarn add @open-wc/form-helpers

Implicit form submit

The submit helper is a useful helper for firing the forms submit event – as a preventable event – only when the form's validity reports back as truthy (meaning the form has all valid values in its inputs) and calling the provided form's submit() method if the submit event is not defaultPrevented.

It is perhaps best used to add implicit form submission to inputs in a form when the Enter key is pressed so that any input can submit a form. Such a feature can be useful for search inputs with no submit button.

This helper is somewhat of a stop gap method until Safari implements HTMLFormElement.requestSubmit()

<form id="someForm" @submit="${submitHandler}">
  <input required>
</form>
import { submit } from '@open-wc/form-helpers';

let submitted = false;
const form = document.querySelector('#someForm');
const input = document.querySelector('input');

input.addEventListener( 'keypress', ($event) => {
  if($event.code === 'Enter') {
    submit(form); // submit event is emitted, and form's submit() method is called if the `submit` event is not `defaultPrevented`
    console.log(submitted) // submitHandler will not be called if the input doesn't have a value AND is required
  }
});

function submitHandler(event) {
  // the event is not prevented, so the form will be submitted
  submitted = true;
};

Please note that submit helper respects form's novalidate attribute and doesn't call reportValidity() if it presents. So with the example below, submit handler will ignore form validation and trigger the submit event.

<form id="someForm" @submit="${submitHandler}" novalidate>
  <input required>
</form>

Parse form values

The formValues helper is a useful function for parsing out the values of a form's inputs in an object format.

import { formValues } from '@open-wc/form-helpers';

Given a form like:

<form>
  <input name="foo" value="one">
  <input name="bar" value="two">
  <input name="baz" value="1">
  <input name="baz" value="2">
</form>

parsing the form's values can be performed as such:

import { formValues } from '@open-wc/form-helpers';

const form = document.querySelector('form');

console.log(formValues(form))

// Output:
// {
//   foo: 'one',
//   bar: 'two',
//   baz: ['1', '2']
// }

Parse form object

The parseFormObject helper enables deeper nesting and organization of inputs in a form by inspecting the name attribute on each input element and analyzing according to dot notation.

import { parseFormAsObject } from '@open-wc/form-helpers';

Given a form like

<form>
  <input name="one.a" value="a">
  <input name="one.b" value="b">
  <input name="two" value="2">
  <input name="foo.bar.baz" value="baz">
  <input name="foo.bar.qux" value="qux">
  <input name="three" value="three">
  <input name="three" value="tres">
</form>

parsing the form values as a deeply nested object can be perfomed as such:

import { parseFormAsObject } from '@open-wc/form-helpers';

const form = document.querySelector('form');

console.log(parseFormAsObject(form))

// Output:
// {
//   one: {
//     a: 'a',
//     b: 'b',
//   },
//   two: '2',
//   foo: {
//     bar: {
//       baz: 'baz',
//       qux: 'qux'
//     }
//   },
//   three: ['three', 'tres']
// }

FAQs

Package last updated on 02 Oct 2023

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc