Dynamic config dashboard

Dashboard
31

OK, even better.

// grab the output that contains the child `div`s of the actual form (the rows of the form)
const frmInputs = msg._ui[0].components[0].components[1].components

// Walk through each row
frmInputs.forEach((inp, i) => {
    // Add a new child div to this row
    inp.components.push({
        "type": "div",
        // You might want to use an extra input array to define standard text for each
        // error msg div.
        // slot: stdErrorText[i],
        slot: 'ERROR',

        // You probably also want to not put an error div on the button row.
        // but I'll leave that as an exercise for others. :-)
    })
})

return msg

So we've got rid of the ID's & attributes because we don't need them at all. Here is some CSS that will show the error divs of EVERY invalid input in the form and hide them otherwise:

form :invalid + div {
    display: block;
    background-color: red;
}
form > div > div {
    display: none;
}