DEV Community


Discussion on: Possibly the Most Useful CSS Trick

nikitaneganov profile image

I actually have 2 thoughts about this - first, is that actually better that validation? especially in the case when it is a login form that requires some front-end validation anyway?

Secondly, how do you handle hitting enter than? By default, input element is also submitted by pressing enter and as far as I know, there is no way to disable that without JS

xtrp profile image
Gabriel Romualdo Author • Edited

In my experience, this trick can be applied to a vast array of things, not just forms that require validation. In the case with login form, of course, I wouldn't recommend using this trick, as the validation wouldn't be covered by :not(:placeholder-shown). In general, I've personally found this trick most useful in search forms, and forms that require little frontend validation such as a text box and button for posting a comment in a comments section.

Your second question is a great one, and brings up a point that I really haven't thought of that much myself. Personally, I would just disable the submit-on-enter functionality via JavaScript (as you said) and use the CSS trick on the side as well, but there may be a pure CSS way to accomplish this. Sorry that I couldn't provide a better answer, but great questions regardless.