You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm new to lit. I'm working on a custom element which is essentially a wrapper over HTML <input type = "text" />. When I use my custom element with native form, I get HTML5 Validation popout when the form is submitted and the input is invalid.
For example
<formaction="example.com"><myInputTextid="myId" minlength="3" />
<inputtype="submit" value="Submit Me" />
</form>
when I have an invalid input, I get something similar to
The HTML Validation popout does not match with the application visual design and I intend to avoid it.
Things I tried:
I cannot have novalidate and formnovalidate attributes on <form> and the submit button as I have no control on the downstream usage of my custom component (myInputText). For the same reason, I cannot have a simple button (to validate and submit form) instead of submit button.
I can listen on input's invalid event and prevent its default behavior. But, I'm not sure of its consequences, and the form may submit invalid value.
Are there any suggestions or guidelines on how I can prevent the HTML5 Validation popout, and have a custom popout appear?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi lit community,
I'm new to lit. I'm working on a custom element which is essentially a wrapper over HTML
<input type = "text" />
. When I use my custom element with native form, I get HTML5 Validation popout when the form is submitted and the input is invalid.For example
when I have an invalid input, I get something similar to
![Screenshot from 2022-04-22 16-40-05](https://user-images.githubusercontent.com/29309018/164706306-27195796-2e4f-4faf-b31c-55e4a420d4f9.png)
The HTML Validation popout does not match with the application visual design and I intend to avoid it.
Things I tried:
I cannot have
novalidate
andformnovalidate
attributes on<form>
and the submit button as I have no control on the downstream usage of my custom component (myInputText
). For the same reason, I cannot have a simple button (to validate and submit form) instead of submit button.I can listen on
input
'sinvalid
event and prevent its default behavior. But, I'm not sure of its consequences, and the form may submit invalid value.Are there any suggestions or guidelines on how I can prevent the HTML5 Validation popout, and have a custom popout appear?
Thanks in advance!
Beta Was this translation helpful? Give feedback.
All reactions