custom web component form element for constraint validation

Question

Only some HTMLElements support the constraint validation api (e.g., HTMLButtonElement). I want to create a custom web component, which also supports the constraint validation api.

In the following an example is given for the desired outcome:

<form>
  <input name="title" required>
  <custom-form-component></custom-form-component>
</form>
<script>
  const form = document.querySelector('form');
  form.checkValidity();
</script>

The custom-form-component could call setCustomValidity on itself (based on the respective user input context) and validate itself true or false. Thus, the call on the form.checkValidity() should return true or false with respect to the outcome of the custom-form-component.

As I found from documentaion (e.g. on MDN) only for some element it is possible to attach a shadow root. It is not possible for form elements. However, only form elements suport the constraint validation api.

concrete question: How can I realise a custom web component, which supports constraint validation api?

Intervalia · Accepted Answer · 2019-09-25 19:53:06Z

9

This is a new introduction to Web Components. As of Sept 25, 2019 only Chrome 76 supports it.

Here is an article provided by Google Web Devs:

https://web.dev/more-capable-form-controls/

It talks about the various additions to Web Components that let them properly integrate as a form element.

This includes:

Form validation
The :disabled, :invalid and :valid CSS pseudoclasses
The formdata event
And a static formAssociated property that tells the browser to treat your element like a form control.

Plus several other things that allows your control to function correction in a <form>

answered Sep 25, 2019 at 19:53

Intervalia

11.1k2 gold badges35 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

custom web component form element for constraint validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related