Is there any option to customize the validation message for input fields?

[manusimelabs]

We can pass the required flag to the input field and it is showing the default browser html validation message. Is there any option to get the errors in the submit event so that we can show the error messages based on our styles?

[sidharthramesh]

Hey @manusimelabs, the way this currently works is by triggering the "reportValidity" method on each element. And this method will halt the submission process if there are any validation errors - https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

However, I believe your use case is very valid. Have any ideas on how we can go about implementing this?

[manusimelabs]

Hi @sidharthramesh, Thanks for responding.

I am trying to customize the validation error styles and messages. https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#Constraint_API%27s_element.setCustomValidity().

I will update here if I get any solution.

[manusimelabs]

@sidharthramesh Is it possible to create a custom 'mb-invalid' event similar to the 'invalid' event of HTMLInputElement? https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event. Handling this custom event could allow us to perform custom validation and error message display instead of relying on default validation behavior.

Additionally, what is the recommended way to style inputs within a shadow DOM? As external styles typically don't affect the shadow DOM's internal elements directly, is there a way to customize the input styles in this scenario (Example. What can I do to add a border around the inputs)?