Releases: github/auto-check-element
Releases · github/auto-check-element
v5.0.1
v5.0.0
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-originin fetch options for older browsers (#36) - Use
AbortControllerto cancel inflight requests (#32) - Use
@github/mini-throttlefor debouncing (#33) - Replace XHR request implementation with fetch (#29)
v4.1.1
v4.1.0
4.1.0
v4.0.2
4.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-Typeheader with a value oftext/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.
v4.0.1
4.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-Typeheader with a value oftext/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.
v4.0.0
- 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
Acceptheader e1acc2c - accept JSON and plain text as responses 62fdaba
- Revert "add typescript definition file" cb38779
- add typescript definition file 2bf5499