What's Changed

• alter error state message by @keithamus in https://github.com/github/auto-check-element/pull/69
• add aria-atomic/aria-describedby in example by @keithamus in https://github.com/github/auto-check-element/pull/70
• Bump ip from 1.1.8 to 1.1.9 by @dependabot in https://github.com/github/auto-check-element/pull/71
• Support alternative HTTP methods by @srt32 in https://github.com/github/auto-check-element/pull/72

New Contributors

• @srt32 made their first contribution in https://github.com/github/auto-check-element/pull/72

Full Changelog: https://github.com/github/auto-check-element/compare/v5.4.1...v5.4.2

What's Changed

• allow setValidity to be removed from event.detail and still be called.
• upgrade CI to node 18 LTS by @keithamus in https://github.com/github/auto-check-element/pull/64
• add to example page, reorder headers to avoid multiple h1s by @keithamus in https://github.com/github/auto-check-element/pull/65
• use a more descriptive examplar name for example fields by @keithamus in https://github.com/github/auto-check-element/pull/66
• Show form submission success messages by @keithamus in https://github.com/github/auto-check-element/pull/67
• Add aria live regions to state blocks by @keithamus in https://github.com/github/auto-check-element/pull/68

Full Changelog: https://github.com/github/auto-check-element/compare/v5.4.0...v5.4.1

What's Changed

• Upgrade packages tests exports by @keithamus in https://github.com/github/auto-check-element/pull/62
• Events by @keithamus in https://github.com/github/auto-check-element/pull/63

Full Changelog: https://github.com/github/auto-check-element/compare/v5.3.0...v5.4.0

Upgrade mini-throttle to v2.1.0.

Thanks to @camertron for their contributions to this release 🙇🏻

https://github.com/github/auto-check-element/compare/v5.2.0...v5.3.0

This release brings you documentation and developer dependency updates. Additionally, the CSRF field is now configurable via the csrf-field attribute. The attribute defaults to authenticity_token, so this is a non-breaking change.

Thanks to @Blitheness and @eroluysal for their contributions to this release 🙇🏻

https://github.com/github/auto-check-element/compare/v5.1.3...v5.2.0

• Convert to TypeScript/remove Flow type support.
• Package is now type module. UMD build is removed.

• Consider all 2xx responses successful

• add type to HTMLElementTagNameMap (#45)

https://github.com/github/auto-check-element/compare/v5.1.0...v5.1.1

• Fixed a flowtype declaration file error (#43)
• Added support for supplying CSRF tags via a child element (#44)

https://github.com/github/auto-check-element/compare/v5.0.1...v5.1.0

• #42 removes change event listener, so auto-check now only happens on input events. This means if your app was previously programmatically changing input value and firing change event to trigger an auto-check call, you'd need to update the code to fire input instead.

• remove early exit when same value is entered in input (#41)

https://github.com/github/auto-check-element/compare/v5.0.0...v5.0.1

A lot of changes! We've completely re-written parts of the component.

• Make sure we emit a loading state outside the debounced function (#35)
• Set the required property correctly when the attribute changes (#39)
• Add hooks so that the consuming application can set validation messages (#37)
• Set credentials as same-origin in fetch options for older browsers (#36)
• Use AbortController to cancel inflight requests (#32)
• Use @github/mini-throttle for debouncing (#33)
• Replace XHR request implementation with fetch (#29)

https://github.com/github/auto-check-element/compare/v4.1.1...v5.0.0

• types(ts): add window declaration 895672e
• Bump eslint-utils from 1.4.0 to 1.4.2 31d1039

https://github.com/github/auto-check-element/compare/v4.1.0...v4.1.1

• Merge pull request #24 from github/content-type-in-payload 0d4522c
• Merge branch 'master' into content-type-in-payload c4566cf
• set content type in error event payload cbc4aed

https://github.com/github/auto-check-element/compare/v4.0.2...v4.1.0

• Merge pull request #20 from github/add-typescript-definition-file 07ceeec
• use a union for nullable type 4e6a779
• Merge branch 'master' into add-typescript-definition-file 16a9019
• Merge branch 'master' into add-typescript-definition-file 4b9f4d9
• add typescript definition file 6d5f818

https://github.com/github/auto-check-element/compare/v4.0.1...v4.0.2

<auto-check> element

An input element that validates its value against a server endpoint.

Installation

$ npm install --save @github/auto-check-element

Usage

import '@github/auto-check-element'

<auto-check src="/signup_check/username" csrf="<%= authenticity_token_for("/signup_check/username") %>">
 <input>
</auto-check>

Provide a URL and a CSRF token and the autocheck component will show validation confirmations and validation errors.

The endpoint should respond to POST requests with:

• a 200 HTTP status code if the provided value if valid.
• a 422 HTTP status code if the provided value is invalid.
• a optional error message in the body and a Content-Type header with a value of text/html; fragment.

Events

const check = document.querySelector('auto-check')

// Network request lifecycle events.
check.addEventListener('loadstart', function(event) {
  console.log('Network request started', event)
})
check.addEventListener('loadend', function(event) {
  console.log('Network request complete', event)
})
check.addEventListener('load', function(event) {
  console.log('Network request succeeded', event)
})
check.addEventListener('error', function(event) {
  console.log('Network request failed', event)
})

// Auto-check result events.
const input = check.querySelector('input')

input.addEventListener('auto-check-send', function(event) {
  console.log('Adding to FormData before network request is sent.')
  const {body} = event.detail
  body.append('custom_form_data', 'value')
})
input.addEventListener('auto-check-success', function(event) {
  const {message} = event.detail
  console.log('Validation passed', message)
})
input.addEventListener('auto-check-error', function(event) {
  const {message} = event.detail
  console.log('Validation failed', message)
})
input.addEventListener('auto-check-complete', function(event) {
  console.log('Validation complete', event)
})

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

• Merge pull request #22 from github/publish-to-gpr-as-well 6364b56
• publish to GPR as a postpublish step 9d159bc

https://github.com/github/auto-check-element/compare/v4.0.0...v4.0.1

<auto-check> element

An input element that validates its value against a server endpoint.

Installation

$ npm install --save @github/auto-check-element

Usage

import '@github/auto-check-element'

<auto-check src="/signup_check/username" csrf="<%= authenticity_token_for("/signup_check/username") %>">
 <input>
</auto-check>

Provide a URL and a CSRF token and the autocheck component will show validation confirmations and validation errors.

The endpoint should respond to POST requests with:

• a 200 HTTP status code if the provided value if valid.
• a 422 HTTP status code if the provided value is invalid.
• a optional error message in the body and a Content-Type header with a value of text/html; fragment.

Events

const check = document.querySelector('auto-check')

// Network request lifecycle events.
check.addEventListener('loadstart', function(event) {
  console.log('Network request started', event)
})
check.addEventListener('loadend', function(event) {
  console.log('Network request complete', event)
})
check.addEventListener('load', function(event) {
  console.log('Network request succeeded', event)
})
check.addEventListener('error', function(event) {
  console.log('Network request failed', event)
})

// Auto-check result events.
const input = check.querySelector('input')

input.addEventListener('auto-check-send', function(event) {
  console.log('Adding to FormData before network request is sent.')
  const {body} = event.detail
  body.append('custom_form_data', 'value')
})
input.addEventListener('auto-check-success', function(event) {
  const {message} = event.detail
  console.log('Validation passed', message)
})
input.addEventListener('auto-check-error', function(event) {
  const {message} = event.detail
  console.log('Validation failed', message)
})
input.addEventListener('auto-check-complete', function(event) {
  console.log('Validation complete', event)
})

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

• Merge pull request #18 from github/json-support 1ee9e14
• make everything required 9aa91c7
• change headings 21166e0
• set correct response text in example 1aa40d8
• make auto-check and input required 25c5c98
• parse JSON string since we are aren't parsing JSON before returning it any more 7171f07
• set correct return type if it's not JSON a1a9416
• we aren't returning JSON any more 944476b
• dont pass data as JSON in event payload eb51100
• update example to show a JSON example a0d5505
• set whatever response as a validity error if it's not json 1958d4a
• send no Accept header e1acc2c
• accept JSON and plain text as responses 62fdaba
• Revert "add typescript definition file" cb38779
• add typescript definition file 2bf5499

https://github.com/github/auto-check-element/compare/v3.0.2...v4.0.0