Form validation is eazy with HTML and CSS. Don't forget to like and subscribe to the channel to continuously update interesting videos about programming and web design 😍
Amazing video!! My answer: If you put :not(placeholder-shown) then the button would be disabled only when the user enters invalid data in the inputs. Without it, you can disable the button from the start if any of the input fields are invalid.
Because we want button should be disabled by default. When user enters correct data then it should be enabled. BTW I love your content... The way you showed the power of html and css... 🔥
Thank you bro, but The reason I haven't been introduced to :user-valid in this video is because many browsers are not yet supported so it cannot be used in real projects.
Love that trick with the placeholder shown ! didnt know this is possible :D I guess we dont want that on the submit button since the submit button should also be shown as disabled no matter if the placeholder is shown or not. We only want to loose the disabled look once all inputs are valid
I have been watching your videos since you started the channel. Your channel is a real gem. I kindly request that you make a complete multifunctional website using only HTML and CSS.
First I love this channel, second pls do a image comparison only using CSS that looks nice like the java query input event ones, if not clear the ones that have like a line in the middle and you move it to see 2 images one on top of each other, also I would love if you consider using your real voice even if it is the thickest of accents ever, if it is hard I would add some subs but there is something about the AI voice that throws me off a bit 😅
I like the effort you put into this video but doing form validation with html and css only makes sense for simple forms like a login interface. Let's say you want to do it on a survey form with conditions, quotas, loops and there it immediately stops making sense to push the logic on css but drive it on a platform with a focus (eg. formik etc..) Yes we would still display styled outcomes through css but the logic needs to stay in js sphere.
Answer: Because it's not necessary ;) When it's valid, it's valid :) And only then we care. Nice trick by the way. Is "placeholder-shown" widely supported by the browsers? How about working with ":has". Would that make it even easier?
Thank you very much, even though this channel has just been established, please believe in the content I share. I learned to code HTML & CSS when I was 13 years old (2010)
This is an oversimplification of most form validation. It's considered best practice not to disable the submit button but allow users to fail and tell them why their submission was invalid. Something not possible with CSS unless you have some very specific CSS selectors, even then there's accessibility to take into account but based on the colors in the design it looks like that wasn't a consideration for this client. I think there is a use for simple validation like this but for complex sites or apps this usually won't cut it.
My Answer: You have not used the :not(:placeholder-shown) for the button as the written style will only be applied whenever the user writes something in the input . My Suggestion for other viewers: It(using :not(:placeholder-shown)) can also be useful in different cases. It helps us to create a default custom style of the button,e.g., to set the default color not to be red
In a form with failed validation, how can I block the submit button if it is BEFORE all the inputs? You only show when submit button is after all inputs. Great video by the way.
Answer: Because you're changing the button relative to the input:invalid which doesn't require you to specify :not since you're not changing anything on the input field and the button only needs to know if the field is valid or invalid. (I guess )
This is amazing... But not gonna lie...LOW-KEY I feel bro got it out for javascript....like he finna prove it nah all that and he can do the same with CSS
Of course you can, but if you only use HTML and CSS you won't be able to remember the last option the user chose. If that's not important to you, everything will be very easy
Just a quick question You validated password with minlength attribute Wouldn't it be risky if someone goes to inspect element and change that attribute value?
You didn't use input with placeholder in last line of code in css because we already checked the validation while typing and now its successfully filled so just need to check if it is valid or not. Correct?
That's right, like I said at the beginning of the video. When users want to cheat, Devtools can help them pass validation not only for HTML but also for Javascript
@@requenz_ PHP is a server sided validation. Validation with PHP is a must, before you write data to your database. Like prevent from SQL injection or any other vulnerable content.
because when you focus the button placeholder is gone and button turn into normal state and what happen when you enter the page what will be the submit button pointer event is none or auto?
Uhmm :not(:placeholder-shown) ... ¿Because we want to disable the button all the time (when the text inputs are empty and when they are invalid as well)?
Yes, using user-valid would be much simpler, however there are still too many browsers that do not support user-valid. So it is not recommended to use user-valid in real projects.
I guess we dont want that on the submit button since the submit button should also be shown as disabled no matter if the placeholder is shown or not. We only want to loose the disabled look once all inputs are valid
@thelfensdrfer Technically yes, in practice no. All the (public) e-mail addresses requires an TLD e.g. ".com", ".net" etc. at the end. So this isn't valid public e-mail.
@@thelfensdrfer Let's say it's register form, newsletter or soever. You want public address to send verification code on correct address, or deliver newsletter. And this tutorial seems to aim web-development (and not localhost). So in short "a@a" will work on "local host" but not on -- public pages; In that case (It's not security because it is easy to workaround) to improve "required" attribute can be used in conjunction with the pattern="" attribute.
Had to quit after 30 seconds, that silly AI-voice and the absolutely annoying sound effects make it unwatchable for me. Why do you ruin good content with that?
Form validation is eazy with HTML and CSS. Don't forget to like and subscribe to the channel to continuously update interesting videos about programming and web design 😍
Extend this with html attr pattern and boom!!
With just over 10 lines of CSS, we can validate the form easily and beautifully
Not possible for complex I suppose, like those with options and specific regular expression
How about :user-invalid / :user-valid? More suitable pseudo
Amazing video!!
My answer: If you put :not(placeholder-shown) then the button would be disabled only when the user enters invalid data in the inputs. Without it, you can disable the button from the start if any of the input fields are invalid.
Yep your right 👍🤍
Topic for next video: What neither Grid nor Flex CSS can do? Subscribe to be the first to see it 😍 ✅✅
i love how you make html and css look so awesome
I love how you admire simplicity. For me, that makes you a top tier channel
i love this sound effects throught your videos
Thanks bro 😍
I hate them, annoying after a while
@@jeandearme32 no
Because we want button should be disabled by default. When user enters correct data then it should be enabled. BTW I love your content... The way you showed the power of html and css... 🔥
Great video.👍Consider using the pseudo classes :user-valid and :user-invalid, that will make the placeholder trick obsolete.🙂
Thank you bro, but The reason I haven't been introduced to :user-valid in this video is because many browsers are not yet supported so it cannot be used in real projects.
I Love your Videos. Great Work.
Great video, thank you. Simple and does just what I need.
You are Great Bro Thanks for this Type Of Content Please Continue making this type of video
BRO😱😱😱I marvellled once I came accross your channel you are a genius thank GOD for you
wow, pro tips, thanks for sharing
Great video.
First comment 😍
Your Content is next level
From the way you present your videos it's like you will be good movie script writer or game developer, you damn good ❤
That's an awesome trick 💯💯
this is very handy! i didn't know 'required' existed in html! really good and straightforward as always.
Great video keep it up
Amazing content 😊
This is just amazing ❤
100k soon ❤
This channel is gold!
Thanks bro 😘
G.O.A.T. [greatestOfAllTime]
Love that trick with the placeholder shown ! didnt know this is possible :D
I guess we dont want that on the submit button since the submit button should also be shown as disabled no matter if the placeholder is shown or not. We only want to loose the disabled look once all inputs are valid
Nice video
Small hint, with the pattern and title Attributes, any regular expression can be used to validate input. 😊
Man, another great video with awesome, easy and entertaining valuable content. Thanks for your good work again. Have a nice day, Hoangho!
Thank you brother
I have been watching your videos since you started the channel. Your channel is a real gem. I kindly request that you make a complete multifunctional website using only HTML and CSS.
Thank you very much, I will keep trying
Your designs are beautiful please make a video for that tooo, how do you choose the design plzz a make a video on design course🙏🙏
Very nice
hey.. I thought it might be useful for my project 👍
Nice.
You are very dangerous .High level .
Great video bro ❤
Thank you for watching my content brother ❤️
The best i love your vidéo
😍😍😍😍 Thanks for watching my content ❤️
Just wow 🤯
Thank you brother 🤤🤤🤤
First I love this channel, second pls do a image comparison only using CSS that looks nice like the java query input event ones, if not clear the ones that have like a line in the middle and you move it to see 2 images one on top of each other, also I would love if you consider using your real voice even if it is the thickest of accents ever, if it is hard I would add some subs but there is something about the AI voice that throws me off a bit 😅
I like the effort you put into this video but doing form validation with html and css only makes sense for simple forms like a login interface. Let's say you want to do it on a survey form with conditions, quotas, loops and there it immediately stops making sense to push the logic on css but drive it on a platform with a focus (eg. formik etc..) Yes we would still display styled outcomes through css but the logic needs to stay in js sphere.
Thanks for the awesome video. Please try to make some js videos too
Now i can flex my skills to my friends
Answer: Because we want the button to be only clickable once all required inputs are valid. Empty inputs are invalid as shown in the video.
Answer: Because it's not necessary ;) When it's valid, it's valid :) And only then we care.
Nice trick by the way. Is "placeholder-shown" widely supported by the browsers?
How about working with ":has". Would that make it even easier?
bro you are great
Thank you bro
Nice
IMO.This is more complicated than using javascript :D
I love your channel, tell me how many years you spend with css and html?
Thank you very much, even though this channel has just been established, please believe in the content I share.
I learned to code HTML & CSS when I was 13 years old (2010)
Great idea, but has a HUGE flaw called "insect element"
please make a series of backend programming I want to learn this from you.
I Will
@@lundeveloper thank you master , I'll be waiting for the series
This is an oversimplification of most form validation. It's considered best practice not to disable the submit button but allow users to fail and tell them why their submission was invalid. Something not possible with CSS unless you have some very specific CSS selectors, even then there's accessibility to take into account but based on the colors in the design it looks like that wasn't a consideration for this client. I think there is a use for simple validation like this but for complex sites or apps this usually won't cut it.
My Answer: You have not used the :not(:placeholder-shown) for the button as the written style will only be applied whenever the user writes something in the input .
My Suggestion for other viewers: It(using :not(:placeholder-shown)) can also be useful in different cases. It helps us to create a default custom style of the button,e.g., to set the default color not to be red
In a form with failed validation, how can I block the submit button if it is BEFORE all the inputs?
You only show when submit button is after all inputs.
Great video by the way.
Answer: Because you're changing the button relative to the input:invalid which doesn't require you to specify :not since you're not changing anything on the input field and the button only needs to know if the field is valid or invalid. (I guess )
I love this Simple hacks
😍
thanks
Bro use user-valid instead of valid same for invalid 😊
HWY HWY can u teach us how u made that background please
Because we only want enable submit button when inputs are completely valid
The shopping cart script you did before was very good.
Can I add product size option?
Yes You Can 😍
@@lundeveloper Hi there. can you please add this function for me? I would pay you a fee for this. I have email you with detail
@@lundeveloper Hi I mailed you with detail. thanks
This is amazing... But not gonna lie...LOW-KEY I feel bro got it out for javascript....like he finna prove it nah all that and he can do the same with CSS
Please Make Video On Switching Dark To Light or Light to dark mode using HTML CSS ONLY (without JS or any other language)
Of course you can, but if you only use HTML and CSS you won't be able to remember the last option the user chose. If that's not important to you, everything will be very easy
@@lundeveloper ok then can you make a course for js
Just a quick question
You validated password with minlength attribute
Wouldn't it be risky if someone goes to inspect element and change that attribute value?
Bro where do you find those background images
You didn't use input with placeholder in last line of code in css because we already checked the validation while typing and now its successfully filled so just need to check if it is valid or not. Correct?
It looks good, but the HTML code can be removed if you open the Devtools by pressing F12.
That's right, like I said at the beginning of the video. When users want to cheat, Devtools can help them pass validation not only for HTML but also for Javascript
@@lundeveloper What about PHP?
@@requenz_ PHP is a server sided validation. Validation with PHP is a must, before you write data to your database. Like prevent from SQL injection or any other vulnerable content.
1:45 how to quick select every props 😲
because when you focus the button placeholder is gone and button turn into normal state and what happen when you enter the page what will be the submit button pointer event is none or auto?
Sir, can you please tell me, which theme of vs code are you using in this video?
@@flash27s This is a custom theme, you will find a video about it in the description of this video.
Uhmm :not(:placeholder-shown) ... ¿Because we want to disable the button all the time (when the text inputs are empty and when they are invalid as well)?
Is there any way to get data of gmail and numbers etc.. of users with only html, css without no backend. 😢
Help..... please
what about tailwind css ?
hey bro, can you make a front-end website as a reference as i have hackathon in about 10 days. Please use html and css only.
if submit is input ? add (:placeholder-shown) : false;
explain plss
Last question why you don't need not:placeholderShown because button tag has no placeholder.
because you need the button to be active after the placeholder is not shown
I like the content, but those musical sounds are absolutely irritating
Thanks for your feedback, I'm adjusting it.
Not add placeholder shown property at last because first time when user not enter any data submit button looks kind of disable
I need a tutorial to make login page pls
Why not use ":user-invalid" instead of the more complex concatenated selector?
VS Code theme name?
How to change the text "please fill this field"
Bro I was comented that why we not use :not(placeholder-shown) Then you asked this question 😅
😅😅 Please wait a moment, I believe someone will reply soon. 😍
Bro what is your vs code them name?
This is a custom theme by me. You will find information about it in the description of this video
Can't the validation issue before the user enters anything be easily fixed by using user-valid and user-invalid?
Yes, using user-valid would be much simpler, however there are still too many browsers that do not support user-valid. So it is not recommended to use user-valid in real projects.
A button has no placeholder shown state. Initially, we want the button only be active, when all fields are validated as correct.
Bro, the fart sound makes me happier 😂
hahaa
Plz awnser your own question Because i want to know
I guess we dont want that on the submit button since the submit button should also be shown as disabled no matter if the placeholder is shown or not. We only want to loose the disabled look once all inputs are valid
Which theme are you using in VS code?
You can find it in description this video
Can you activate subtitles
It is being processed
because a button doesn't have a placeholder
sudden chello cords gives us anxiety lol bye
But you know, "a@a" is valid e-mail in html?
Because it is a valid email.
@thelfensdrfer Technically yes, in practice no. All the (public) e-mail addresses requires an TLD e.g. ".com", ".net" etc. at the end. So this isn't valid public e-mail.
@@KsaR-99 why does it have to be public?
@@thelfensdrfer Let's say it's register form, newsletter or soever. You want public address to send verification code on correct address, or deliver newsletter. And this tutorial seems to aim web-development (and not localhost). So in short "a@a" will work on "local host" but not on -- public pages; In that case (It's not security because it is easy to workaround) to improve "required" attribute can be used in conjunction with the pattern="" attribute.
@@KsaR-99 there are more networks than localhost and the public internet. Intranets, company networks, etc.
The sounds 😭😭😭 i cant
is it bad?
@@lundeveloper no i love it. Fart sounds will never not make me laugh
Nice videos, but oh man these sound effects... Totally random and not classy. Please stop :(
No thank you...Dev tools can easily remove all forms of security from the form 😞😞😞
Had to quit after 30 seconds, that silly AI-voice and the absolutely annoying sound effects make it unwatchable for me. Why do you ruin good content with that?
Are you Mr beast
What is this sounds bro 😭
It is bad ?
freaky 👅 sound effects @@lundeveloper
Nice.