How to manage entire attributes

[joe-watkins]

Hello, I'm new to Iodine. :)

How would one add or remove an entire ARIA attribute with Iodine.js based on validity of a field?

Valid:

<label for="firstName">
  <input id="firstName" required>
</label>

Invalid:

<label for="firstName">
  <input id="firstName" required aria-invalid="true">
  <!-- ... -->
</label>

Is there a clever way to manage entire attributes instead of just toggling its true/false value?

[mattkingshott]

Hey there.

You’d need to perform a validation check, then examine the JavaScript object that’s returned. See the example response in this section… https://github.com/caneara/iodine#multiple-item-checks

The fields property contains each form input. You can then check the valid key for each one and update the aria attribute on the corresponding input accordingly.

As for doing it in a clever way, I’d reach for something like AlpineJS and bind the aria attribute.