BUILD YOUR OWN FORM VALIDATION SYSTEM WITH JAVASCRIPT 🔽 th-cam.com/video/fE5ASN0sbtI/w-d-xo.html 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
I was facing another issue while coding, i hope you can help me. In the username field when i enter a single character or less than 10 character it is suppose to give me error to enter 10 characters but instead it takes me back to login page. I am using vscode latest version. I think it has to do with this.
Great video.. I got there in the end :) it was a bit fast but I guess thats the beauty of it being a video (pause, rewind, fast forward etc :)) The JS part I'm still wrapping my head around but I would love to see a follow up of storing the usernames and validating etc
Hi Dom! Have you thought of using buttons instead of links for "Already have an account? Sign in" and "Don't have an account? Create account"? The reason is they actually perform actions unlike links which they take you to another page. I think it would be more semantic, so to speak.
@@larryshamala8929 yes, you can... but I think that's not recommended as buttons were created to take care of actions such as those you're highlighting. If you need to run actions (through functions) on the same page, use buttons. If you need to go to another page, use links.
For those having trouble with the hiddern--form part of the video here's how I fixed my problem. 1. I misspelled script in this line of code and had to fix it 2. const loginForm = document.getElementById("login"); Instead of using docuemnt.getQuerySelecotr(); use getElementById instead for the loginForm and createAccount variables. Then keep querySelector for the other parts of the code
great explanation. I haven't touched my computer yet as I'm watching it on my phone, but I already receive a good understanding of how the html, css, and javascript work. thank you!
I love your work. Wonderful job. Could you show us how to integrate a online database like firebase to this beautiful login form? Thank you very much 🥰
hey dcode, I'm not sure why as I'm still new to js, but in using e.preventdefault, im still returned to the root index of the folder instead of hidding the register container and showing the login container. I've tried a bunch of things using stack overflow to fix it, but the issue propagates and I'm not sure why.
Hi dcode, thanks for the video. When would you suggest creating a new html page vs. using JavaScript to hide/change the display? Would following JavaScript always cause the whole page to be loaded, so if there were certain parts of the page with heavy images (for example), best to create a new html page to speed up website use?
I have a question: the file is called index.html but in the address field it says login-signup-demo - I didn't catch how that leads to the index.html page being shown?
I'm at the bit where you make it so that when you press login it gives an error message but I have an error when I press it saying Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). Can someone help me?
hey i trid this but m getting an error at this jscript.js:9 Uncaught TypeError: document.addEventListner document.addEventListner("DOMContentLoaded", () => { const loginForm = document.querySelector("#Login"); and nothing is working after that PLEASE HELP MAKING A LOGIN FOR OFFICE WORK
Hi Dom! I tried following with this, at 31:30 when you added form_ _hidden it hid the first form and when you added the second form in it showed the second form. On my side, it actually hid both the sign up form and the login form, do you know why that is? could it be due to the nesting on the html page?
So idk where I went wrong but the "hidden" class hides the whole thing and the toggle idea doesn't work. The links don't switch forms, it does nothing. I feel like finding the error would be trying to find a needle in a haystack 😔
when i click on enter in the create account form it takes me to the login form why is this happening and what should i do pls help, and how do we apply the very last function to the "invalid username/password combination" message in log in form to make it disappear when the user clicks to rewrite the input
i have a problem when i click sign in, it appears to change. But when i click again to sign up, it still have the form--hidden class in the form. how can i prevent it (i have added preventDefault already) P.S: i forgot to add classList in the querrySelector. Thks for read this cmt
Hey, brother i have an qeury of this login page because i work as like you work but one error founded plz can you solve it because i need your help please
But how do you get it to WORK? How do you get it to identify users by their name and PW, and how do you get it to take them to a specific page? And how do you make it possible for people to create an account in the first place? I successfully installed the login form on one of my websites. It looks great, but it doesn't actually do anything. It's like a car without an engine.
Ok but how to I make the login and signup buttons actually do anything but be buttons.. I have NOT found any tutorials on the whole internet on how to do it using Visual Studio Code
The reason why you can't find any videos on it is because there are many different server-side technologies you can use for your websites. This video focuses on the front-end of creating a signup/login form. I suggest you look up how to create login/signup form using PHP - try the "codecourse" TH-cam channel.
been following this video and im on day 2 of trying to work out this issue im having - cant tell if its from the JS or HTML however, when i click on the links that have the element " href="./" " (FOR EXAMPLE : Already have Account? Sign in same goes for the create account link I dont get the JS to activate and instead it takes me to my file directly ... i've been trying to figure this out for a while now, im a self taught noob coder lol - anyone have any solutions?
so uhm i need some help cuz i tried that i even removed my code any copied urs in but it wont help that already have an accountbutton will always take me to an index file of all my files idk what todo at this point
Idk what I’ve done but when clicking on the create new account button or clicking already have an account login it just takes me to index of c:\ n then then navigation of the file can anyone help
BUILD YOUR OWN FORM VALIDATION SYSTEM WITH JAVASCRIPT 🔽
th-cam.com/video/fE5ASN0sbtI/w-d-xo.html
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
I was facing another issue while coding, i hope you can help me. In the username field when i enter a single character or less than 10 character it is suppose to give me error to enter 10 characters but instead it takes me back to login page. I am using vscode latest version. I think it has to do with this.
Great video.. I got there in the end :) it was a bit fast but I guess thats the beauty of it being a video (pause, rewind, fast forward etc :)) The JS part I'm still wrapping my head around but I would love to see a follow up of storing the usernames and validating etc
i like how you explain things not just boldly robotickly go and just write you deserve a sub+like
Great explanations. It's insane how fast you can go.
Hi Dom! Have you thought of using buttons instead of links for "Already have an account? Sign in" and "Don't have an account? Create account"? The reason is they actually perform actions unlike links which they take you to another page. I think it would be more semantic, so to speak.
You can still use tge links to perform other actions like calling a function
create account?
my_function(){
alert("i want to create an account");
}
@@larryshamala8929 yes, you can... but I think that's not recommended as buttons were created to take care of actions such as those you're highlighting. If you need to run actions (through functions) on the same page, use buttons. If you need to go to another page, use links.
yess
For those having trouble with the hiddern--form part of the video here's how I fixed my problem.
1.
I misspelled script in this line of code and had to fix it
2. const loginForm = document.getElementById("login");
Instead of using docuemnt.getQuerySelecotr(); use getElementById instead for the loginForm and createAccount variables. Then keep querySelector for the other parts of the code
I had the same problem, thank you for the solution.
Same thing happened to me too, but i tried this and it didn't work
Hey can you help me with those code
Thanks For the video, This Is Helping Our Company Lots
great explanation. I haven't touched my computer yet as I'm watching it on my phone, but I already receive a good understanding of how the html, css, and javascript work. thank you!
I like your explanation, it’s always super clarified and interesting, respect❤️
Thanks Jubo!
@@dcode-softwaresự sư sẽ bị có
I love your work. Wonderful job.
Could you show us how to integrate a online database like firebase to this beautiful login form? Thank you very much 🥰
That is a great idea
can u make a video with this form but using localstrorage for signup and login ? Tks you so much
It will be greatful if he does it
Would be interested in database storage of users
this was really easy for database storage: th-cam.com/video/2Vf1D-rUMwE/w-d-xo.html
Have searched the whole web for this answer thx M8
Love the video, Would suggest you SLOW DOWN.
dcode the OG 🔥
Dcode This was so useful thankyou.
Use brackets editor 👍
wow, underrated video
Yes.. 2*18=32
very very accurate.
Can you make a working signup webpage tutorial? Please do.
thank you very much! your explain is perfect, maybe a little fast (for me) but perfect :D
Thank you so much man!!! This really helps out a lot!!!
hey dcode, I'm not sure why as I'm still new to js, but in using e.preventdefault, im still returned to the root index of the folder instead of hidding the register container and showing the login container. I've tried a bunch of things using stack overflow to fix it, but the issue propagates and I'm not sure why.
Yaa I too have the same issue
Same. Any fixes?
Superb video, wanted to know any one video coming in future containing from frontend to backend or playlist?
Hey Prabhat, thank you. Could you please explain a little more what you mean?
@@dcode-software mean any full stack playlist.
Ahh ok, sorry I don't have anything like that planned any time soon 😟
@@dcode-software ok.
Thank you
This was very helpful to me thank you!
Hi dcode, thanks for the video. When would you suggest creating a new html page vs. using JavaScript to hide/change the display? Would following JavaScript always cause the whole page to be loaded, so if there were certain parts of the page with heavy images (for example), best to create a new html page to speed up website use?
You're going so fast mate
thank you!
THANK YOU IDLE HTML CODE ITS USEFUL
Thanks
Hey! Nice Video! Just have one question, how do you make like a message that pops up when you put the right information?
thank you so much! just wanted to ask if theres some way formElement recognises that it should refer to either loginForm and createAccountForm?
yes
I started coding when I was 7!
Thank you for this tutorial, you could to the tutorial for backand for this same example.
My link to the already have an account button doesn't open anything it just opens my main html folder. can anyone help?
It's good to use the "span" tag instead of use divs for an error message?
What about data? how to connect in sql server
Thanks , Good Job
have you made any video on JWT, I want my user to signup and login but I don't want there information stored
bro i tried it, but it only reads the html code can someone help me
thankuuu!!
I have a question: the file is called index.html but in the address field it says login-signup-demo - I didn't catch how that leads to the index.html page being shown?
How did you pull up the website to run the code? Thanks
I don’t know if it’s the best but I am using xampp just watch a tutorial how to download it and you can host a website locally on your PC
The blood sweat and tears that went into copying and configuring this code into my html. Thanks for the tutorial
What a nice video it was 🔥
Why did you put the form__message--error in the Html if you are adding it from the JavaScript?
Cus he wanted to see if the style applies to it
is there a tutorial on how to actually use this to be able to create a genuine account and log onto a page using said account?
I'm trying to do the --form hidden but for some reason it does not dissapare. Instead its ontop of the account creator. Is there a way to fix that?
please can you create a food ordering webpage
I'm at the bit where you make it so that when you press login it gives an error message but I have an error when I press it saying Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). Can someone help me?
Great video
hey i trid this but m getting an error at this
jscript.js:9 Uncaught TypeError: document.addEventListner
document.addEventListner("DOMContentLoaded", () => {
const loginForm = document.querySelector("#Login");
and nothing is working after that PLEASE HELP MAKING A LOGIN FOR OFFICE WORK
Hi Dom! I tried following with this, at 31:30 when you added form_ _hidden it hid the first form and when you added the second form in it showed the second form. On my side, it actually hid both the sign up form and the login form, do you know why that is? could it be due to the nesting on the html page?
I think you might have form--hidden on both forms. Or maybe you forgot to change some tags?
In the index.html you have to add in the body this:
Same problem here, did you manage to find anything?
@@blackwacks5517 read my comments
@@Davide-jc1ox I have it linked already :/
thank you very much, the ever video
that's great!!!!
So idk where I went wrong but the "hidden" class hides the whole thing and the toggle idea doesn't work. The links don't switch forms, it does nothing. I feel like finding the error would be trying to find a needle in a haystack 😔
have you found out the problem? I have the same problem right now.
I had the same problem and was solved after adding the right link to my js file on the code, hope it helps!
Thank You Sir, can i copy your work for profit business in my country ! i'm just beginner.
when i click on enter in the create account form it takes me to the login form why is this happening and what should i do pls help, and how do we apply the very last function to the "invalid username/password combination" message in log in form to make it disappear when the user clicks to rewrite the input
Nice video👍
Like i click in the ("your allredy account exciting then not open login form ") open directory of desktop file
11:25 - how to add color properties as "constants"
I have everything down but my continue button goes to the login screen instead of submitting it
having some issues with the js switching between login form and create account form,
it just doesn't work.
i have a problem
when i click sign in, it appears to change. But when i click again to sign up, it still have the form--hidden class in the form. how can i prevent it (i have added preventDefault already)
P.S: i forgot to add classList in the querrySelector. Thks for read this cmt
How to add PHP and MySQL Data base , This Login System Pls Explain Next Video
Thank you for the intel
Good Job Broooo
Hey, brother i have an qeury of this login page because i work as like you work but one error founded plz can you solve it because i need your help please
@7:25 @dcode why does my coffee cup script editor say:
"A document must not include more than one autofocus attribute"
??
great video
Glad you enjoyed it
thaks u save my live
it' s showing me an error of " Cannot set property 'textContent' of null ", I have to submit my assignment and i can't able to fix it
It's an amazing video but i got a question i can't configure .form__input-group and i looked everywhere
Everything is fantastic, but "2 times 18 is 32" did hurt me
Sometimes it gets a little difficult to do even basic math under pressure 😁
@@dcode-software coding isn't stressing at all, they say
HOW ARE YOU SO FAST?! LOL
i really like your voice for some reason lol
which app is used to host the project
Vscode
But how do you get it to WORK? How do you get it to identify users by their name and PW, and how do you get it to take them to a specific page? And how do you make it possible for people to create an account in the first place? I successfully installed the login form on one of my websites. It looks great, but it doesn't actually do anything. It's like a car without an engine.
Does it store the user data?
The link didnt work for me. could you do a follow up cause the link didnt switch. Copyed the code.
I followed the video but jv doesn’t work
how can i run or test the code beginner here
Part 2?
Is there a source code? I am having some errors I'm not quite understanding.
How do I connect it to an existing project though?
You would have to implement it, which you put behind a button, and when someone clicks on it it opens the login/sign up page
Why inserting PHP code inside the code prevents the JavaScript event's
Ok but how to I make the login and signup buttons actually do anything but be buttons.. I have NOT found any tutorials on the whole internet on how to do it using Visual Studio Code
The reason why you can't find any videos on it is because there are many different server-side technologies you can use for your websites. This video focuses on the front-end of creating a signup/login form. I suggest you look up how to create login/signup form using PHP - try the "codecourse" TH-cam channel.
@@dcode-software Thank you!
hi i have done everything in this tutorial but doent work please help
Your video is good but even if I write the correct password it would still be wrong can you help me?
been following this video and im on day 2 of trying to work out this issue im having - cant tell if its from the JS or HTML however,
when i click on the links that have the element " href="./" " (FOR EXAMPLE :
Already have Account? Sign in
same goes for the create account link
I dont get the JS to activate and instead it takes me to my file directly ... i've been trying to figure this out for a while now, im a self taught noob coder lol - anyone have any solutions?
you need to have href="#" ./ this means that it should go back a file
why use DOMContentLoaded Javascript
Does anyone know the name of this colour sheme if it's not custom?
What is the password/ username and where are they in the code?
so uhm i need some help cuz i tried that i even removed my code any copied urs in but it wont help that already have an accountbutton will always take me to an index file of all my files idk what todo at this point
Same issue
how do you get that jpg file into visual studio code
wow, only 13 mins in and my container wont center and im getting a syntax error for putting ':' right after --color-primary
Idk what I’ve done but when clicking on the create new account button or clicking already have an account login it just takes me to index of c:\ n then then navigation of the file can anyone help
Same issue here
Why other people don't add container ? They ignore that .
Like you did in this vid but put a skip point in the screen