Learn JavaScript form validation || JavaScript project for beginners ✨✨
Вставка
- Опубліковано 16 лип 2024
- Today we're gonna look at how to do form validation using JavaScript. This is a complete JavaScript project for beginners.
GitHub : github.com/JoyShaheb/Project-...
CodePen : codepen.io/joyshaheb/pen/XWgdOyY
Time Stamps -
0:00 - Intro
3:12 - HTML
18:44 - CSS
45:45 - JavaScript
1:16:55 - Social Media buttons
1:30:03 - Adding the images
1:44:41 - Media Query
CSS Units [REM, EM, VW, VH, %] explained with examples
• CSS Units [REM, EM, VW...
Learn CSS Position Property with examples
• Learn CSS Position Pro...
CSS Box Model -
• Learn CSS Box model wi...
CSS Media Queries -
• Learn CSS Media Query ...
Have a Question or Project idea? Let me know about it in the comment box down below. 👇
Both Suggestions & Criticisms are Highly Appreciated ❤️
Follow me on:
👉 LinkedIn : / joyshaheb
👉 Twitter : / joyshaheb
👉 Instagram : / joyshaheb
👉 Github : github.com/JoyShaheb
Queries Solved -
1) How to do form validation using JavaScript
2) Form validation for beginners
3) learn JavaScript form validation
#JavaScript #WebDev #Frontend
For mentorship visit : www.academy.poshpixel.studio/
I think something missing on your face. 😹
these indicate that channel is growing.Thank you bro for taking my comment into consideration.make projects like this.THANK YOU. : )
@@venkatswaraj3054 most welcome. Suggest me more content ideas 🌹
The video is amazing I love it, keep on👍
You look like a pro! Thank you for this amazing tutorial Joy!! It helped a lot :)
I love how your teaching makes me stay alert throughout the tutorial while other tutors usually makes me tap out.
I'm really really said that you are the most easiest explaining teacher/mentor/instructor i've ever seen. I'm stuck at JS for 3 months but after watched this, I have understood a lot of it. Hopefully you will send out a full course of JS.
the best explanation i have ever seen probably the best the best front end tutor
you don't know how beautifully you explained.. each and every step is crystal clear. Thank you so much. Please continue these videos considering beginners in mind.
You are awsome teacher bro..I couldn't even think about anything during your class..hatsoff
Thank you so much. You are super smart but more you have an amazing way of teaching. Thank you and God bless you!
Just love it - learn't a whole bunch of really cool new concepts - great for a beginner like me - thank you
Wow Joy! I just started watching this tutorial and I am amazed at how beautifully you've explained everything. Honestly, it's superb and extremely informative. Thank you bro.
Happily subscribed!
Nice video Bro! This video is exactly what I was looking, excellent for beginners. And congrats for you new microfone too!
Thank you so much Joy!!! Amazing Tutorial!! Can't wait to watch your next tutorial.
Superb Bro 🔥🔥 pls make Javascript full course for beginner's.. 🙏🏻
Yes bro we wait you
I agree, it's needed
Checkout harshit vasisth channel
@@jaynandansharma6315 yes I'm following his javascript mastery series..
@@Raj-iz9uz then why do u need another one?? wth 😂😂😅..tbh tht couse is too enough
Awesome vid brother. thank you! You're very talented at breaking things down and teaching !
Great tutorial! Was able to learn a lot of Javascript from your tutorial!
Super tutorial awesome teaching
Enjoyed this massively. Appreciate the time and effort.
Very clear explanation. Ty !
Keep going you are a great teacher! Good Work Providing the resources!
This video is great! Kudos to you Joy. I learned a lot from your video tutorial.
❤luv you joy sir i never heard this type of program breaking into such easy steps
Thanks a lot Joy !!!
Thank you so much. This was very well explained.
wow ! awesome teacher , i enjoyed the way you teach !!
Amazing !!! Superrrrrrrrrr bro !! keep it up
Hey, joy, this project is really knowledgeable, make more projects like this using vanilla javascript.
You are an amazing teacher, all love ❤️
Awesome video ! thanks
amazing video thank you!
East to the west, Joy is the best💥💥
great job ☺☺
Great work
amazing, you rule!
love your tutorials, im already suscribed 😀
Thank you for the tutorial. You're a great teacher. Upload more content videos, sir!
I love you, sir. You are a great Teacher.
this was amazing bro, thanks a lot.. please make more vanilla js projects like this
Awesome explanation.
thanks bro it was awesom
U r amazing bro
From algeria ❤️
Thanks mate!
u are the best! came from ffc figma video
Thank you!
It's a Great video...
Best teacher EVER!!!!
Durdanto tutorial.
really good man
Great
Loved the way you explained everything. You are really a great teacher.
That's true
Hello joy ,this project is really really amazing, make more videos like this using javascript
Amazing content. Learned alot. Pleae make more front end videos using html, css and javascript joy . Love you ❤
I am also over here to learn amazing stuffs from you!
superb!
Awesome
bro i really like this and i watched your ice cream production asynchronous tutorial in freecode camp it is very awsom do like this bro keep it up.
Thanks Brother
I like the way you teach
Hi, bro. The video is awesome and I'm looking forward to your CSS animation videos.
This is really helpful thank you (red heart)
In all you’re a very good teacher. It is easy to follow you even though you’re quite fast. I wish I didn’t get stuck.
Hi Fasan, I trust that you know of the playback speed button where you can increase or decrease the speed of the video!
Bro way of explaining is awesome Thank u so much & can u make a video on Angular and git tutorial including branches ..etc.. using real time as your way.
Love your video very easy to follow along, understand and learnt a heap of shortcuts. just one question what do u need to do to make the form actual perform the action to post" it to your server so u can store or process that, ive had a look but cant seem to figure it out. have done other exercises that have additional content in the form line action="/feedback" method="post" but cannot work out how to trigger this with your code
Hello Joy...First of all, I really appreciate all the efforts you put to make this tutorial as easy as possible...My question to you is how can we make a confirm password validation in javascript with the success icon and danger icon functional? I look forward to your kind response.
Please make a 4-5 project based tutorial with html css and javascript where all concepts will cover
It would be helpful if you Make a video on regex
please do more videos...
Can you make a part two to cover the JS part of social log in feature? And also what happen after sign in
please share some video to use debugger perfectly on javaScript.
You always explain things so we'll, the way you ask the viewer questions is very engaging. Where did you learn your teaching style?
Thank you for the well wishes, love and support. I'm glad you loved my tutorials ❤
I used to be a teacher before The pandemic 😄
Brother you can't imagine how your tutorials helped me thank you boss❤
Most welcome 🌹
Great tutorial as always! Big fan from India! what is that cool looking desktop background from anime? please provide link for that!
Dear Joy,
First of all, Thank you soo much for making this kind of knowledgeable content. You are really a very good teacher. As I recently started to visit your videos and tried to gain a little knowledge from your javascript videos.
But I have one query regarding this form validation, when I tried to create it, my form "submit addEventListener" didn't work. Please explain why it is not working.
But instead of :
form.addEventListener("submit", (e) => {
e.preventDefault();
errorMsg[1].innerHTML = "Hello."
});
It works with :
submitBtn.addEventListener("click", ()=> {
errorMsg[0].innerHTML = "This is mandatory!"
});
please can you do a full git and github course
need a big project from your side plz upload saheb if you can...
Thank you for a great Tutorial. But one question, how do you then allow the form to Submit. Using preventDefault stops the form from submitting once all fields are filled.
Project Idea: database for the Form Validation. How can I handle the user info? Thank you my friend!
you teach really well !
but I'm not getting font cdn on font awesome ig they have changed it can you please see
I really loved the way you explained everything in detail👍 I've never come across any tutorial that was explained in a such a simple way as this one😍. Thank you so much for this lovely tutorial, looking forward for some more tutorials.
Also this is just a suggestion if possible since this was just a client side verification, could make a tutorial on server side verification as well? You could call it a part two of this tutorial 😁 it would be of great help to us all. I really loved the way you cleared all my doubts, good luck 👍
Sure buddy, thank you for all the love and support 🥺🥺🥺
Please do javascript multi-step form validation. I can't find any helpful video about it on UA-cam.
I'm not able to add event listner on VS. What should i do ?
Subscribed..liked..I couldnt join the link you provided
hi joy your video help me alot but i am facing 2 issue in my code ....if (email.value == "") is not working i have to write down if (id("email").value ==="") to make it working ..dont know why..
password is not showing success icon otherwise all is working fine ..
Need full web development courses
thanks a lot Joy once again for this
i am waiting your Sass course from beginner to advance
and
when you say something and take little time to speak again that's great due to this i am able to retain the things
most of the people that i saw say fast when comes to teaching due to this i am not able to retain the things in mind
and it depends student also
but at the end that's good trick and keep that in future videos :)
Thank you for all the love and support.
the sass course is coming. It's gonna be pretty big [1.5 to 2 hours]. Stay tuned ;)
@@JoyShaheb thanks great
@@JoyShaheb I'll wait
why not use regex in validation
Where is the short video about 4 ways to center things in css that you made 2 or 3 months ago???
code source are not avaiable in github unable to download ...............................
if I want to move in anther page when click to submit button ,how can i do that?
Use anchor tags
7:26 When you press Ctrl-S I can't seem to get that link of code to shift down the way yours does.
Do you also mind telling us how you manage to get the cursor to reach the end of a line or on a new line whilst you are in the middle of an existing statement
@@NeonLightification hello sandeep, I use a vs code extension called prettier. This formats my code automatically
Check my channel. I have a video on VS code plugins.
Happy coding 😄
@@JoyShaheb legend thanks a lot. I've subscribed to your channel. It looks really good.
I got stuck at the form section on JavaScript and I’m angry with myself. Nothing just happens when I invoke the function!
Hi Joy Shaheb! I have one question please! Its possible to make an email verification in and return an diferente message in browser? I mean, two messages for two errors? Like error 1 "this field cannot be empty" error 2 "this email is not valid"
Thank you so much
yes possible, just edit the .innerHTML part
@@JoyShaheb Ok I will try, thank you
格局
hi, i posted a question yesterday but somehow it isn't showing up here. I coded along with you, however the success icon isn't overlapping with the error icon, but is going below the input field. What could be wrong? Thanks a lot!
Hey, I hope you're doing well.
I checked your code it's working perfectly fine. Your first comment got removed from UA-cam as UA-cam doesn't allow posting links and stuffs. I got the link from my dashboard.
If you have any more questions or problems, let me know it here. And thank you for trying the project, I hope you enjoyed it 😄
@@JoyShaheb Thank you for your kind reply. Now I realised why it is appearing correct for you but not for me. I'm accessing it from Firefox, and you must be using Chrome. How does one go about that? Thanks.
@@kristacalleja8008 certain properties doesn't work on Firefox , chrome or any specific Web browser. I highly suggest you to use "caniuse" website to check if that property has support on the browser or not. And yeah, a quick fix to this browser compatibility issue is webkits.
@@JoyShaheb Thank you so much for your reply. This issue of webkits is a big question mark for me. How does a professional front-end developer actually go about preparing CSS for all the possible browsers out there.
Can you make a calculator app using js??
Sure. Stay tuned 😉
Hey are you bengali?
my js code didn't work ...?
Link the javascript file inside html
@@JoyShaheb thanks, bro your quick reply. I sort it out.
You follow which tutorial?? :p
Dev Ed, freecodecamp, coder coder, florin pop, coursetro, udemy, Web dev simplified, traversy media, css tricks, etc.
Joy Shaheb
At 3:10 - no beard
At 3:18 - with beard 🧔.
... 🤔🤔
😅😅
again beard went on 1:30:19
don't use video face. .it's hamper concentration
"over here" is so irritating , rest is good
everything is great! except the Accent of a Bengali -- why copy the "Someone else's Accent", You are a Bengali. Be Proud of it! and and stay with your roots! even on the accent.