An input element that validates its value with a server endpoint.
MIT License
Bot releases are visible (Hide)
Full Changelog: https://github.com/github/auto-check-element/compare/v5.4.1...v5.4.2
Published by keithamus over 1 year ago
setValidity
to be removed from event.detail
and still be called.Full Changelog: https://github.com/github/auto-check-element/compare/v5.4.0...v5.4.1
Published by keithamus over 1 year ago
Full Changelog: https://github.com/github/auto-check-element/compare/v5.3.0...v5.4.0
Published by camertron over 1 year ago
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
Published by muan over 4 years ago
Published by muan over 4 years ago
https://github.com/github/auto-check-element/compare/v5.1.0...v5.1.1
https://github.com/github/auto-check-element/compare/v5.0.1...v5.1.0
Published by muan almost 5 years ago
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.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.
same-origin
in fetch options for older browsers (#36)AbortController
to cancel inflight requests (#32)@github/mini-throttle
for debouncing (#33)https://github.com/github/auto-check-element/compare/v4.1.1...v5.0.0
https://github.com/github/auto-check-element/compare/v4.1.0...v4.1.1
https://github.com/github/auto-check-element/compare/v4.0.2...v4.1.0
Published by koddsson about 5 years ago
https://github.com/github/auto-check-element/compare/v4.0.1...v4.0.2
Published by koddsson about 5 years ago
An input element that validates its value against a server endpoint.
$ npm install --save @github/auto-check-element
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:
Content-Type
header with a value of text/html; fragment
.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)
})
Browsers without native custom element support require a polyfill.
npm install
npm test
Distributed under the MIT license. See LICENSE for details.
https://github.com/github/auto-check-element/compare/v4.0.0...v4.0.1
Published by koddsson about 5 years ago
An input element that validates its value against a server endpoint.
$ npm install --save @github/auto-check-element
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:
Content-Type
header with a value of text/html; fragment
.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)
})
Browsers without native custom element support require a polyfill.
npm install
npm test
Distributed under the MIT license. See LICENSE for details.
Accept
header e1acc2chttps://github.com/github/auto-check-element/compare/v3.0.2...v4.0.0