Suggestion: Make form validation more consistent with the VS Code input box

[a-stewart]

The only example I have been able to find of input validation in VS Code already is in the Quick Input bar.

What do you think about updating the form validation styling to match that?

In the above screenshot I have only updated the text-field, I'll update the others if you are happy with the concept.

The changes are:

• For the input itself, only change the border colour, leave the input background as is.
• Attach a message directly below the input field which includes the error message.

In this case "What's your favorite fruit?", is the existing styling, whereas "What's your email address?" is the proposed change.

We'd need to consider how this would look for radio buttons and checkboxes, but I think the general idea holds.

We could also put this behind a property, eg <vscode-textfield inline-validation> or something like that.

---

I'd also like to have some way to configure it to use :user-invalid instead (optionally) for less aggressive verification (this would also be behind a property).

[bendera]

I've been thinking about this a lot. Without the error message the style of the invalid filed doesn't differ enough from the valid one.

We could also put this behind a property,

Yes, I considered that as well. I'm still looking for an appropriate variable name, I feel that 'inline-validation' doesn'T fully reflect what it actually does.

I'd also like to have some way to configure it to use :user-invalid instead (optionally) for less aggressive verification (this would also be behind a property).

I agree, and I also plan to implement this. Is defaultInvalid a good name for it? I’m also considering a global config variable. Is that a good idea?

[a-stewart]

I've been thinking about this a lot. Without the error message the style of the invalid filed doesn't differ enough from the valid one.

Yeah - that makes sense - would there ever be a case when there is not a validation message? The example I have pulls the message from the browser that would be shown on the tooltip.

We could also put this behind a property,

Yes, I considered that as well. I'm still looking for an appropriate variable name, I feel that 'inline-validation' doesn'T fully reflect what it actually does.

Yeah - there is also the same situation as below where you likely want to configure that globally so all elements in the form are rendered one way or the other

I'd also like to have some way to configure it to use :user-invalid instead (optionally) for less aggressive verification (this would also be behind a property).

I agree, and I also plan to implement this. Is defaultInvalid a good name for it? I’m also considering a global config variable. Is that a good idea?

I think configuring that globally if possible makes sense - not sure if we'd want to configure on each input, although I can see an argument for that potentially. Ideally we would set it on the form somehow but I don't know how possible that is.

[a-stewart]

I've shared some WIP code just to give an idea of what I was thinking code wise - I haven't tested this version of the code yet as the version I was working off originally was a bit older and didn't include the <div class="root"> so I am not sure how that will play with my changes.