Calcite Input Validation - provide examples of how to do validation with Calcite form inputs

[JonnyDawe]

Description

In experimenting with using Calcite form inputs I found it was more complicated than I expected to set up client side form validation.

1. calcite-input name attribute:

The first issue relates to the impact of missing out the name of a calcite-input when using it in a form. If you do not include a name attribute, any validation properties you set, such as the required attribute or a minimum value, look to be ignored and not added to the input in the component. Consequently, these inputs will not undergo validation when you attempt to submit the form. You can refer to this codepen example to see this behaviour.

It's worth noting that according to the W3C specification, including a control name is required for the input element to be processed when in a form. However, my confusion arose because the of the difference to a native input element which does validate.

I think an example of client-side validation inside of a form would have prevented my confusion.

2. Working with the Status Flag:

I am really interested in using the status flag to change the styling of an input when it is deemed to be invalid. Currently, unless I am mistaken, the only way of controlling the status attribute is by changing the property on the component itself, whereas I was hoping it would update when the input was validated inside of a form.

Would it be possible to get some examples of working with the status property in the context of form validation?

Which Component

calcite-input

Resources

No response

[geospatialem]

Effort will be executed once the https://github.com/Esri/calcite-design-system/issues/4598 epic has been completed targeted for September.

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

Verified on main

[DitwanP]

Here is the link to the new validation section. Form Validation

I hope this helps clarify things for you @JonnyDawe.