Form Validation Easy Using HTML And CSS Only

[@lundeveloper]

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 😍

[@manthankanani188]

Extend this with html attr pattern and boom!!

[@lundeveloper]

With just over 10 lines of CSS, we can validate the form easily and beautifully

[@anuvabkumarrit4669]

Not possible for complex I suppose, like those with options and specific regular expression

[@dmitrybelov5703]

How about :user-invalid / :user-valid? More suitable pseudo

[@gmarsenopoulos]

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.

[@lazy-hero.]

Yep your right 👍🤍

[@lundeveloper]

Topic for next video: What neither Grid nor Flex CSS can do? Subscribe to be the first to see it 😍 ✅✅

[@egadirgaa]

i love how you make html and css look so awesome

[@mateod700]

i love this sound effects throught your videos

[@lundeveloper]

Thanks bro 😍

[@jeandearme32]

I hate them, annoying after a while

[@freakfreak786]

@@jeandearme32 no

[@hameeeed5992]

Great video.

[@lundeveloper]

First comment 😍

[@utsavjaiswal007]

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... 🔥

[@HuynhLuong227]

wow, pro tips, thanks for sharing

[@MarkupMaverick]

Great video.👍Consider using the pseudo classes :user-valid and :user-invalid, that will make the placeholder trick obsolete.🙂

[@lundeveloper]

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.

[@drumlinbeatpaul]

Great video, thank you. Simple and does just what I need.

[@muhammadadnanrazaqadri]

You are Great Bro Thanks for this Type Of Content Please Continue making this type of video

[@freakfreak786]

I love how you admire simplicity. For me, that makes you a top tier channel

[@glennwarindu4580]

BRO😱😱😱I marvellled once I came accross your channel you are a genius thank GOD for you

[@tolgaflashtr2855]

That's an awesome trick 💯💯

[@social_klauts]

I Love your Videos. Great Work.

[@roshanaslam7480]

Great video keep it up

[@philathea]

From the way you present your videos it's like you will be good movie script writer or game developer, you damn good ❤

[@sol____-_-]

Nice.

[@luisdavidmartinezfundora8224]

This is just amazing ❤

[@keshav2kumar]

Very nice

[@thezaidushaikh]

Your Content is next level

[@redswordz9131]

this is very handy! i didn't know 'required' existed in html! really good and straightforward as always.

[@SwitchSwift12]

Amazing content 😊

[@vanshchauhan5340]

100k soon ❤

[@PicSta]

Man, another great video with awesome, easy and entertaining valuable content. Thanks for your good work again. Have a nice day, Hoangho!

[@lundeveloper]

Thank you brother

[@franckngoubounkou9930]

You are very dangerous .High level .

[@georgikyshenko4380]

This channel is gold!

[@lundeveloper]

Thanks bro 😘

[@angryllamaa]

Now i can flex my skills to my friends

[@DavideMaiolo]

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

[@emmaeli-m2u]

G.O.A.T. [greatestOfAllTime]

[@MustaPha-s4i]

The best i love your vidéo

[@lundeveloper]

😍😍😍😍 Thanks for watching my content ❤️

[@besuccessfull1891]

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🙏🙏

[@tanvirkabir47]

Just wow 🤯

[@lundeveloper]

Thank you brother 🤤🤤🤤

[@amitmallick4915]

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.

[@lundeveloper]

Thank you very much, I will keep trying

[@jayvee-official]

hey.. I thought it might be useful for my project 👍

[@LuffyD-u7l]

Nice

[@okforcoding]

Great video bro ❤

[@lundeveloper]

Thank you for watching my content brother ❤️

[@peterbaerts]

Nice video Small hint, with the pattern and title Attributes, any regular expression can be used to validate input. 😊

[@AirmanCS]

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 😅

[@YINREX-24]

bro you are great

[@lundeveloper]

Thank you bro

[@Anonymous34958]

Thanks for the awesome video. Please try to make some js videos too

[@kodeeshwarar2301]

I love this Simple hacks

[@lundeveloper]

😍

[@andphysics4318]

please make a series of backend programming I want to learn this from you.

[@lundeveloper]

I Will

[@andphysics4318]

@@lundeveloper thank you master , I'll be waiting for the series

[@denizorsel1029]

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.

[@jerickojamestano626]

thanks

[@mr.masolov1611]

Great idea, but has a HUGE flaw called "insect element"

[@johnlloydtenido6915]

IMO.This is more complicated than using javascript :D

[@yourherper]

I love your channel, tell me how many years you spend with css and html?

[@lundeveloper]

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)

[@AlexCernat]

better is to use :user-valid and :user-invalid; they aren't new anymore, so the support is great now!

[@treshi]

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 )

[@tibba69]

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.

[@BliitzPint]

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?

[@DeepJasoliya]

Because we only want enable submit button when inputs are completely valid

[@JanMitLuca]

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.

[@king82823]

1:45 how to quick select every props 😲

[@FullStack-s8g]

Bro use user-valid instead of valid same for invalid 😊

[@ionsula141]

The shopping cart script you did before was very good. Can I add product size option?

[@lundeveloper]

Yes You Can 😍

[@ionsula141]

@@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

[@DinahLang-y4g]

@@lundeveloper Hi I mailed you with detail. thanks

[@mattdaus5715]

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.

[@roshplays21]

HWY HWY can u teach us how u made that background please

[@muhammadadnanrazaqadri]

Please Make Video On Switching Dark To Light or Light to dark mode using HTML CSS ONLY (without JS or any other language)

[@lundeveloper]

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

[@muhammadadnanrazaqadri]

@@lundeveloper ok then can you make a course for js

[@gandhirajs7055]

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?

[@alin7295]

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

[@awaken-trigger]

Is there any way to get data of gmail and numbers etc.. of users with only html, css without no backend. 😢 Help..... please

[@Aguinaldowagas]

if submit is input ? add (:placeholder-shown) : false;

[@_u_nknownuser]

explain plss

[@mohdamir914]

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?

[@joel-rg8xm]

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)?

[@nirban7689]

Not add placeholder shown property at last because first time when user not enter any data submit button looks kind of disable

[@PLAGUEDOCTOR-28]

I need a tutorial to make login page pls

[@roydeljoseph]

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

[@wtf_vish]

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.

[@psenej]

what about tailwind css ?

[@UAP_Clips]

because you need the button to be active after the placeholder is not shown

[@requenz_]

It looks good, but the HTML code can be removed if you open the Devtools by pressing F12.

[@lundeveloper]

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_]

@@lundeveloper What about PHP?

[@PicSta]

@@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.

[@codeSlay-yv4wq]

Bro where do you find those background images

[@jeandearme32]

I like the content, but those musical sounds are absolutely irritating

[@lundeveloper]

Thanks for your feedback, I'm adjusting it.

[@wordspace121]

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?

[@aluexpress987]

Last question why you don't need not:placeholderShown because button tag has no placeholder.

[@PicSta]

A button has no placeholder shown state. Initially, we want the button only be active, when all fields are validated as correct.

[@flash27s]

Sir, can you please tell me, which theme of vs code are you using in this video?

[@lundeveloper]

@@flash27s This is a custom theme, you will find a video about it in the description of this video.

[@Rodrigo-nx4fg]

Bro, the fart sound makes me happier 😂

[@lundeveloper]

hahaa

[@madhavanj998]

How to change the text "please fill this field"

[@nobie-art]

Can't the validation issue before the user enters anything be easily fixed by using user-valid and user-invalid?

[@lundeveloper]

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.

[@lucadetomi9269]

Why not use ":user-invalid" instead of the more complex concatenated selector?

[@Crix-X982]

Plz awnser your own question Because i want to know

[@DavideMaiolo]

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

[@Crix-X982]

Bro I was comented that why we not use :not(placeholder-shown) Then you asked this question 😅

[@lundeveloper]

😅😅 Please wait a moment, I believe someone will reply soon. 😍

[@masar-at]

VS Code theme name?

[@MithilaChiranjeewa]

Bro what is your vs code them name?

[@lundeveloper]

This is a custom theme by me. You will find information about it in the description of this video

[@NehaV-ly5hk]

Which theme are you using in VS code?

[@lundeveloper]

You can find it in description this video

[@Nodsaibot]

sudden chello cords gives us anxiety lol bye

[@_MrThii]

Can you activate subtitles

[@lundeveloper]

It is being processed

[@h3llloworld]

because a button doesn't have a placeholder

[@Impact_TO]

The sounds 😭😭😭 i cant

[@lundeveloper]

is it bad?

[@Impact_TO]

@@lundeveloper no i love it. Fart sounds will never not make me laugh

[@KsaR-99]

But you know, "a@a" is valid e-mail in html?

[@thelfensdrfer]

Because it is a valid email.

[@KsaR-99]

​ @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]

@@KsaR-99 why does it have to be public?

[@KsaR-99]

​@@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.

[@thelfensdrfer]

@@KsaR-99 there are more networks than localhost and the public internet. Intranets, company networks, etc.

[@bw-dude]

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?

[@DanSmith-ku3wn]

Nice videos, but oh man these sound effects... Totally random and not classy. Please stop :(

[@PaulAllsopp-rh5gb]

How funny! Try validating an email address without JS now that the HTML5 email type was basically abandoned. Now HTML5 says user@server is a valid email, and even adding a pattern doesn't work. You have to use JS, period.

[@choujiakimichi]

No thank you...Dev tools can easily remove all forms of security from the form 😞😞😞

[@Wanstudio_est]

Are you Mr beast

[@bohdanvoznyi3599]

What is this sounds bro 😭

[@lundeveloper]

It is bad ?

[@khuslenkk1560]

freaky 👅​ sound effects @@lundeveloper