Directory

← Back

auto-check-element

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

Author

Rating

Popularity

<100

<auto-check> element

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

Installation

$ npm install --save auto-check-element

Usage

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2019-04-26
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

auto-check-element - Vaadin Add-on Directory

An input element that validates its value with a server endpoint. auto-check-element - Vaadin Add-on Directory
# <auto-check> element An input element that validates its value against a server endpoint. ## Installation ``` $ npm install --save auto-check-element ``` ## Usage ```js import 'auto-check-element' ``` ```erb "> ``` 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 ```js 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][support] require a [polyfill][]. - Chrome - Firefox - Safari - Microsoft Edge [support]: https://caniuse.com/#feat=custom-elementsv1 [polyfill]: https://github.com/webcomponents/custom-elements ## Development ``` npm install npm test ``` ## License Distributed under the MIT license. See LICENSE for details.
Online