Asynchronously adding form validators #2368

ActuallyACat · 2024-09-19T08:51:11Z

ActuallyACat
Sep 19, 2024

Hi 👋🏻

Is there a way to asynchronously add form validators? If so, can this be documented?

For my use case - I'm consuming components outside of Lit in ERB/Ruby templates. I would like to load all my validators on page load, i.e.:

import  { Required } from "@lion/ui/form-core.js"
document.addEventListener('DOMContentLoaded', function() {
   const myInput = document.querySelector('#my-input');
   myInput.validators = [new Required()];  
});

Is there a way to achieve this?

Answered by ActuallyACat

Sep 23, 2024

Okay, after reading more of the Lit documentation, it's clear that this approach won't work because all my listeners are being added outside of the Lit lifecycle. I'll need to rejig/rethink my approach to ensure all my event handlers are properly attached. Thanks anyway! :)

View full answer

gerjanvangeest · 2024-09-19T09:00:09Z

gerjanvangeest
Sep 19, 2024
Maintainer

Hi @ActuallyACat, did you take a look at: https://lion-web.netlify.app/fundamentals/systems/form/validate/#asynchronous-validation ?

0 replies

ActuallyACat · 2024-09-20T03:55:50Z

ActuallyACat
Sep 20, 2024
Author

Thanks for getting back to me so quickly! That doesn't quite fit my use case - I'm rendering all my components on the server, and adding my validators once the DOM is loaded. E.g.

<body>
  <lion-form>
    <form action="/">
      <lion-input id="first_name" name="first_name" label="Subject"></lion-input>
      <lion-input id="last_name" name="last_name" label="Last Name"></lion-input>
      <lion-button-submit>Submit</lion-button-submit>
    </form>
  </lion-form>

  <script>
  // For brevity, assume all associated components have been correctly imported
  document.addEventListener("DOMContentLoaded", function () {
    loadDefaultFeedbackMessages()
    const field = document.querySelector("#first_name")
    field.validators = [new Required()] 
  });
  </script>
</body>

It doesn't quite work as I'd expect it to. The first_name field correctly shows an error when it becomes dirty + invalid, however, the focus is not moving to the invalid input when I click submit.

I created a similar example in Lit (with the validators added the same way as they're presented in the docs .validators=[new Required()]) and the form moves focus to the invalid input once the form is attempted to be submitted, as expected.

I'm just wondering if there's something I've forgotten to do or am not quite using correctly. Do you have any thoughts?

0 replies

ryubro · 2024-09-20T09:33:49Z

ryubro
Sep 20, 2024
Collaborator

Hi @ActuallyACat,

Can you make a minimal reproduction on https://stackblitz.com/~/github.com/Knorgias/lion-demo, please?

2 replies

ActuallyACat Sep 22, 2024
Author

I've created a minimal repro here: https://github.com/ActuallyACat/lion-input-validation-demo/tree/main

First example is the issue I'm facing - the validation error doesn't appear when form is submitted.
Second example is attaching validators in Lit. Validation appears on form submit, and what I would expect to happen in the first example.

ActuallyACat Sep 23, 2024
Author

Okay, after reading more of the Lit documentation, it's clear that this approach won't work because all my listeners are being added outside of the Lit lifecycle. I'll need to rejig/rethink my approach to ensure all my event handlers are properly attached. Thanks anyway! :)

Answer selected by ActuallyACat

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Asynchronously adding form validators #2368

{{title}}

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Asynchronously adding form validators #2368

ActuallyACat Sep 19, 2024

Replies: 3 comments · 2 replies

gerjanvangeest Sep 19, 2024 Maintainer

ActuallyACat Sep 20, 2024 Author

ryubro Sep 20, 2024 Collaborator

ActuallyACat Sep 22, 2024 Author

ActuallyACat Sep 23, 2024 Author

ActuallyACat
Sep 19, 2024

Replies: 3 comments 2 replies

gerjanvangeest
Sep 19, 2024
Maintainer

ActuallyACat
Sep 20, 2024
Author

ryubro
Sep 20, 2024
Collaborator

ActuallyACat Sep 22, 2024
Author

ActuallyACat Sep 23, 2024
Author