Default HTML5 validation error outline (CSS) - How to take it out ?!

HTML-CSS
1

Hello,

So as you probably know Firefox, Chrome and I assume all the other browers have that default outline when focusing on an input. That can be taken out with a input:focus {outline: none;} BUT… when there is an error such as a HTML5 error for an email input because of the email pattern that is not respected there is red all around the input and an error message.

Since I coded the input to not be required but to still be checked (method=“post”) I was wondering what I could do to take out the red around it if the user typed an unvalid email.

I ofc googled it and tried to do a little research on my own and found that : form id=“form” novalidate works BUT not sure what that does and if it is what I want.

Please check the screen to make my problem a little more clear to you.

Screenshot: https://postimg.cc/image/3ymp0f9zx/
Codepen: https://codepen.io/Tech_CA_Bro/pen/mjgJoQ

Thanks!

2

i would say, just don’t use an email type… Use a basic text field input and that way no checking will be done.

3

Smart but what I want is that if it is blank of invalid it lets it through since it is not required and if it is valid it just goes through like it already does not sure if I’ve already done what I could with only HTML and CSS not sure if I make sense too :(.

4

can you edit your post above to add the thing that is missing after the “found that:” part ?
I cannot see what you wrote there…

5

It has been done idk what was up but it works now…

6

I believe the email checking is done by the browser and such you cannot control it via html.

7

Ohhh. Maybe just so I know when I’ll get into JS can we totally change it to our preference with JS ? :smiley:

8

You could code an input text field with whatever behaviour you want with JS, that’s for sure.

Keep in mind that in a real form, there is multiple levels of validation. Some at the client (browser) level and some at the server level (so email addresses for eg. are not just validated in the browser but also by the code that receives the form)

1 Like
9

Alright. That’s extremely good to know. Right now I’m still struggling with the Responsive Web Design module and I have A LOT of work before the next one and before JS so I’ll keep that in my head and proceed to something else until I can learn JS. Thanks a lot. For the moment I’ll use form id=“form” novalidate its the closest to what I want I guess!