Skip to content

@koddsson koddsson released this Aug 19, 2019 · 1 commit to master since this release

<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.

Assets 2
  • 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

v4.0.1...v4.0.2

Assets 2

@koddsson koddsson released this Aug 9, 2019 · 7 commits to master since this release

<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.

Assets 2

@koddsson koddsson released this Aug 9, 2019 · 6 commits to master since this release

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

v4.0.0...v4.0.1

Assets 2

@koddsson koddsson released this Aug 6, 2019 · 9 commits to master since this release

  • 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

v3.0.2...v4.0.0

Assets 2
Pre-release
Pre-release

@koddsson koddsson released this Jul 31, 2019 · 23 commits to master since this release

  • 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

v3.0.2...v4.0.0-beta.1

Assets 2

@koddsson koddsson released this Jul 29, 2019 · 25 commits to master since this release

  • Merge pull request #19 from github/update-deps f733e46
  • update eslint, flow, karma and mocha dependencies 0ba6184
  • update babel-preset-github 51e8a8b
  • run npm update d001ac3
  • Merge pull request #16 from github/dependabot/npm_and_yarn/js-yaml-3.13.1 d304e38
  • Bump js-yaml from 3.12.1 to 3.13.1 e248b6f
  • update unpkg link on examples page df5e15d

v3.0.1...v3.0.2

Assets 2
May 23, 2019
3.0.1

@koddsson koddsson released this May 20, 2019 · 38 commits to master since this release

Refactor the public element API and add flow definition file.

v2.0.0...v3.0.0

Assets 2
Apr 26, 2019
2.0.0
You can’t perform that action at this time.