JavaScript beginner tutorial 30 - form validation text boxes and passwords

  Рет қаралды 162,163

Quentin Watt Tutorials

Quentin Watt Tutorials

10 жыл бұрын

In this video I finally start speaking about form validation. I show you how to check if a form field has been left empty, and how to use a return statement in JavaScript.
Don't forget to subscribe:
/ quentinwatt Social links:
-------------------------------------------------------------
Add me on twitter:
/ quentinwatt
facebook group:
/ quentin.watt
-------------------------------------------------------------

Пікірлер: 155
@CASMANWHAT
@CASMANWHAT 9 жыл бұрын
for anybody trying to learn JavaScript. i've found most helpful is following along with Quentin, writing it out and making the mistakes. then writing it out from scratch again without the vid and actually telling yourself what it is you're doing. it became internalized that way for me because now i know the functions, variables, methods etc. and what they're doing/mean/ etc. as opposed to just blindly copying and moving onto to the next vid, which is what i originally was doing and realized i wasn't internalizing everything. ne ways, thx again Quentin! you're a great teacher with wonderful teaching skills and good luck all.
@Gamemineros
@Gamemineros 8 жыл бұрын
No better man for this job Quentin.. I really think there is nobody that explains it that well pal. Perfect rythm, everything very clear.. Keep it up:)
@langdont1
@langdont1 7 жыл бұрын
Great Tutorial... been looking for this info for months for one of my sites. Tried it and it worked like a charm. Thanks Again! Subscribed and Great Tutorial!
@rickyseguna23
@rickyseguna23 10 жыл бұрын
You are the man Quentin Whatt ,seriously!!!!, I hope your not wasting your talent teaching for free, you defiantly need to be getting paid for this.
@tashekarhoden3716
@tashekarhoden3716 8 жыл бұрын
Your tutorials are so helpful, I used them to study for my final Exam you make them so easy to understand.#ContinueTheGoodWork
@yashomifernando3704
@yashomifernando3704 8 жыл бұрын
Bravo!!!! your teaching way is marvelous+ comprehensible!!! Thanks a lot.
@chezmilani6294
@chezmilani6294 6 жыл бұрын
Thanks Quentin, your clips are brilliant!
@tclark7177
@tclark7177 10 жыл бұрын
Thank you for this. I can't wait for the next ones to come out.
@sanaullahkhan9529
@sanaullahkhan9529 6 жыл бұрын
these tutorials are so helpfull it is precise , concise and short and also so nicely explained
@papyrus88
@papyrus88 Жыл бұрын
Your videos are so good! Makes me understand things I did not understand from my course! 🙏🙏🙏
@QuentinWatt
@QuentinWatt Жыл бұрын
Thank you, I'm glad it helped. :)
@integrii
@integrii 10 жыл бұрын
Thanks for this series. Great JumpStart!
@anurodhacharya6979
@anurodhacharya6979 2 жыл бұрын
Thanks Quentin for amazing video tutorial!
@QuentinWatt
@QuentinWatt 2 жыл бұрын
My pleasure!
@k0b0yash1
@k0b0yash1 9 жыл бұрын
Thanks a lot! I started coding HTML/Java/CSS and this helps alot!
@alexhailey4445
@alexhailey4445 8 жыл бұрын
Thanks Quentin. Clear and precise instructions and it's all working well. Thanks a lot. May I make a small suggestion? I'm new to Javascript and needed to follow the coding exactly as you wrote it. It would have been good if you could had displayed the final and completed code in one screen shot at the end of the tutorial as I had made a typing error which I'd missed and this would avoid keep going through the tutorial over and over again. Thanks again. Alexandra.
@truefitcollection4897
@truefitcollection4897 7 жыл бұрын
Thanks Quentin. It's awesome video.
@priyankasawant2142
@priyankasawant2142 5 жыл бұрын
I owe you a big Thanks Man! God bless ya!
@georgigeorgiev2219
@georgigeorgiev2219 8 жыл бұрын
Thank you again! GOD bless you and keep you.
@luciferneverborn307
@luciferneverborn307 6 жыл бұрын
thankyou for your tutorials it really helped me a lot
@maxvdberge8181
@maxvdberge8181 5 жыл бұрын
great tut! works very well!
@drizzydreadful4237
@drizzydreadful4237 10 жыл бұрын
Because of your damn videos, I could have been playing some Warcraft 3 with some friends for our last class day buuuutttt noooooooooo. My teacher is making watching this boring series which we are going to forget after our Christmas break. I hope your happy sir. You ruined a good day.
@QuentinWatt
@QuentinWatt 10 жыл бұрын
Warcraft has been around for many years and will be around for many more. There will be plenty opportunity to crush the undead legions when you're done. :)
@georgigeorgiev2219
@georgigeorgiev2219 9 жыл бұрын
Thank you for the tutorial. GOD keep you.
@user-kj1if2rw3f
@user-kj1if2rw3f 7 жыл бұрын
Great video! Thanks :)
@uumoss
@uumoss 9 жыл бұрын
I already subscribe thank brother for the tutorial
@Mr.Lucifer0009
@Mr.Lucifer0009 8 жыл бұрын
Very nice tutorials sir your explanation is very good keep posting sir :)
@mdshaheenhossain5369
@mdshaheenhossain5369 8 жыл бұрын
Nice Tutorial. Thanks a lot.
@ahwei8034
@ahwei8034 6 жыл бұрын
thanks bro it help me a lot
@shamsunnahar9745
@shamsunnahar9745 8 жыл бұрын
Many thanks.
@lesolak843
@lesolak843 8 жыл бұрын
nice and easy for beginners like myself.
@kylez1750
@kylez1750 8 жыл бұрын
thank you so much
@Lordhavemercy2354
@Lordhavemercy2354 5 жыл бұрын
hi! nice video you got here. I have a question, how can i limit the user attempts to login to the website? thank you!
@vipinsaini5128
@vipinsaini5128 10 жыл бұрын
Gr8!! Work!!!
@Ic3m4te
@Ic3m4te 4 жыл бұрын
thanks man!!
@senyoritaayuna918
@senyoritaayuna918 8 жыл бұрын
awesom thank u man i preciate it .... i was confuse with it but now i can make it thank u man may alah blase u love u
@emmanuela.2932
@emmanuela.2932 7 жыл бұрын
_*Awesome, thank you, man, I appreciate it... I was confused with it but now I can make it; thank you, man, may God bless you, love you._ God dammit, your grammar is horrible!
@kaifrabi5244
@kaifrabi5244 7 жыл бұрын
Correct spelling is "Allah". And you should capitalize Allah's name.
@zuber3228
@zuber3228 6 жыл бұрын
Hello senyorita , first thing you are gorgeous ,and second thing you don't know the spelling of appreciate
@thefreeze6023
@thefreeze6023 6 жыл бұрын
+Aashu ji *señorita.
@platio101
@platio101 6 жыл бұрын
Thank you!
@henkvandermeer2189
@henkvandermeer2189 5 жыл бұрын
very helpful
@gupta921
@gupta921 7 жыл бұрын
Nic teaching sir thankyou
@michaelgerke9077
@michaelgerke9077 10 жыл бұрын
thanks for this tutorial. I learnt a lot. Do you also plan tutorials for server side scripting e.g. PHP, MySQL? I am interesting to understand how to build a web application with client, server and database. I know....many requirements :-)....good luck for the exams!
@imjay1062
@imjay1062 9 жыл бұрын
Thex Quentin...:)
@Kavkazec999Vnature
@Kavkazec999Vnature 7 жыл бұрын
Hey Quentin! I have a question. For inputs such as username and password why do we even need a name parameter? I mean how do we use it later on?
@patrickbroaden9820
@patrickbroaden9820 4 жыл бұрын
Great....👍🏾
@SammySey813
@SammySey813 8 жыл бұрын
thank you,
@soudaminisamal6159
@soudaminisamal6159 4 жыл бұрын
Nice teaching sir
@QuentinWatt
@QuentinWatt 4 жыл бұрын
THANK YOU!
@fekedeweyessa9274
@fekedeweyessa9274 8 жыл бұрын
it is good! do for another
@vinodbharate4712
@vinodbharate4712 9 жыл бұрын
hello quentein i wanna ask you that can explain if there any way get value other than get element by id
@1200steven
@1200steven 10 жыл бұрын
thanks a lot!
@AnggaRisky
@AnggaRisky 8 жыл бұрын
u don't need database or server-side, just make a sample variable for each input. var username = "quentin" and u can make a validation username === usernameFromInput
@user-sv2bn7ev2m
@user-sv2bn7ev2m 7 жыл бұрын
Hey Quentin, is it better practice to handle events in our scripts rather than HTML?
@barathmanikandan688
@barathmanikandan688 6 жыл бұрын
Best!!
@jonessmith8670
@jonessmith8670 6 жыл бұрын
Super!!
@xdustmc
@xdustmc 10 жыл бұрын
thank you! :)
@JadendayZero
@JadendayZero 7 жыл бұрын
How about if its more than one field? Do we type out all the variables inside the if else statement? Isn't their an easier way instead of typing 10+ var inside the if else statement?
@DoomFinger511
@DoomFinger511 7 жыл бұрын
How do make it so when a user types in the wrong patter (like not using the @ symbol in an email) that a message appears? I want different messages to appear based on the field with the error.
@Jacksonworthless
@Jacksonworthless 7 жыл бұрын
amazing wow thanks
@Jacksonworthless
@Jacksonworthless 7 жыл бұрын
George Skinner You wish mate
@kaztee7369
@kaztee7369 6 жыл бұрын
hi what code we use to refresh login page if user enters wrong details.jquery or javascr
@mohammadhaque2571
@mohammadhaque2571 8 жыл бұрын
thanks.
@KuldeepKumar-wd1sd
@KuldeepKumar-wd1sd 7 жыл бұрын
in onsubmit attribute where and what it is returning ?pl clarify
@khosasarbjeet
@khosasarbjeet 10 жыл бұрын
what is the difference between name and id of form elements.
@steinadlerx5917
@steinadlerx5917 10 жыл бұрын
Not work for me... for now, I can't find what is problem I made same thing
@edp3595
@edp3595 10 жыл бұрын
I tried to put space in both the password and username field and unfortunately it still submitting the form
@mattnilsen1199
@mattnilsen1199 7 жыл бұрын
Hi Quentin Why doesn't my password input area show black dots ?? because i am running in google chrome ? ive gone over my code and compared it with yours
@namankhajuria1725
@namankhajuria1725 7 жыл бұрын
i am not able to perform validation on ma form i am doing excatly how you told to do so but on clicking on submit button it is still redirecting to next html page
@priyap5200
@priyap5200 6 жыл бұрын
What is the use of
@junedshaikh5162
@junedshaikh5162 7 жыл бұрын
how can we use normal empty message instead of alertbox?
@souravpodder2402
@souravpodder2402 8 жыл бұрын
Awesome
@QuentinWatt
@QuentinWatt 8 жыл бұрын
Thanks for all the comments. :D
@hamzaparekh5419
@hamzaparekh5419 7 жыл бұрын
sir, where did the data submit how do you know who submit the data please answer
@nuhankhan2394
@nuhankhan2394 7 жыл бұрын
when you will start your php tutorials.
@hakanoxelsen2572
@hakanoxelsen2572 4 жыл бұрын
do you have with lockal storage?
@QuentinWatt
@QuentinWatt 4 жыл бұрын
This series was made long before ES2015 and all the amazing new features of JavaScript. I need to update it. :) You can watch my series on Vue for something a bit more up to date.
@bvsreenidhi
@bvsreenidhi 9 жыл бұрын
bro how to validate whether an authenticated user has entered if not after registering how to validate using javascript?
@AkshanshShrivastava
@AkshanshShrivastava 8 жыл бұрын
but what if user submitted incorrect data ?
@kevinrobisidro529
@kevinrobisidro529 8 жыл бұрын
I don't get it. I get the error message with the form method "post", but it works when I change the method to "get". "post" won't direct me to submission.html, but "get" does. :( Username: Password:
@sarvesh_k
@sarvesh_k 8 жыл бұрын
how javascript add with php
@vipinsaini5128
@vipinsaini5128 10 жыл бұрын
Hello...... I am looking for tutorial 31 onwards.... but unfortunately i could not find in KZfaq so please can you send me the complete tutorial link?? This tutorial is really very nice!! Thanks!!!
@QuentinWatt
@QuentinWatt 10 жыл бұрын
I have been busy with exams and haven't made the rest yet. Sorry :(
@vipinsaini5128
@vipinsaini5128 10 жыл бұрын
First of all thanks for your response!! It's ok if you are busy in exams but i am hoping that you will release new tutorial as soon as possible. Your tutorials are really very very helpful and easy to understand. In a nutshell, 'AWESOME'!! Keep it up!! Thanks!!
@TheBillaro
@TheBillaro 7 жыл бұрын
when i click login, with blank fields, nothing happens!
@AbdulKareem-vo6ke
@AbdulKareem-vo6ke 7 жыл бұрын
I have one doubt that is how to display the user name in the action = "submission.html" page and iam searching for this for long time
@karansandhya28
@karansandhya28 7 жыл бұрын
Use localStorage to move values from one html page to another
@briannahwatson5894
@briannahwatson5894 8 жыл бұрын
interesting Easter egg, biatch arrives at 7:29 (closed caption only)
@sauravkumar17
@sauravkumar17 8 жыл бұрын
I used the same code but instead of .value I used .length to test if the document.getElementById('username') is greater than 0. However, the code didn't work as both times it returned the submission.html page even when I had set return false for .length = 0. Can anyone explain what's wrong with it. I kept everything else the same.
@kalpshah2804
@kalpshah2804 7 жыл бұрын
it'll be var username-document.getElementById('username').value.length;
@nvnarendran
@nvnarendran 10 жыл бұрын
Shouldn't the condition be & only then its right to evaluate...Also i have a doubt..By this we check only if the string is empty right..In case we give spaces only then the data is still validated..So is there anything like trimming or something that we could add ??
@QuentinWatt
@QuentinWatt 10 жыл бұрын
This was a very basic tutorial, I didn't have time to cover that, but it will definitely be in a string manipulation tutorial.
@nvnarendran
@nvnarendran 10 жыл бұрын
Thanks a lot for your response. I'll be looking forward to your next set of tutorials.
@SmedoChannel
@SmedoChannel 7 жыл бұрын
i work in adobe dreamweaver...but at "else" it give me an error ..why?if u can help me... function check_info(){ var username = document.getElementById('username').value; var password = document.getElementById('password').value; if(username=="" || password=="");{ alert('please fill in all fields'); return false;} else { return true;} }
@antoniofcsd
@antoniofcsd 7 жыл бұрын
f(username=="" || password==""); - remove this semicolon in the end also this text: alert('please fill in all fields'); should be in double quotes
@doffe9999
@doffe9999 10 жыл бұрын
why do you have to give the forms a name and a type?
@QuentinWatt
@QuentinWatt 10 жыл бұрын
The name is to identify the data when it is sent to the server, and the type is to change how the input element is rendered in the browser.
@speedlearner
@speedlearner 7 жыл бұрын
I'm about to post a webpage. It's an Italian tutorial. I want to charge people to get into advanced lessons. This webpage will have a password feature. I will send my customers passwords to access advanced lessons. How can I prevent people from selling the passwords I issue them? In other words, how can I make sure the person using the password is the person who purchased the password?
@Wolf-xy9hu
@Wolf-xy9hu 7 жыл бұрын
Why not have them sign a legal contract?
@nvnarendran
@nvnarendran 10 жыл бұрын
The if condition has to be && not || so that both conditions are checked..
@QuentinWatt
@QuentinWatt 10 жыл бұрын
The condition would work better with ||, because if 1 is filled in while the other is empty the && statement would no longer be true while the || statement still is.
@nvnarendran
@nvnarendran 10 жыл бұрын
The || will work out even if one of them is not empty rite ?? but in case of && it will check for both to be true..If the username is false then it wont evaluate the password field but still isn't that the expected o/p..cause practically we need both fields to be not empty..
@bertusschuurman346
@bertusschuurman346 10 жыл бұрын
nv narendran Your comment actually made me type out the wole thing. You're just wrong, that's all :)
@DrunkenShinobi
@DrunkenShinobi 10 жыл бұрын
Can you upload the code for this tutorial? For some reason, although I followed your every step more than once, it stilled sent me to the next page when I clicked "login" without writhing any password or username...
@QuentinWatt
@QuentinWatt 10 жыл бұрын
All the code is on my forum. :)
@DrunkenShinobi
@DrunkenShinobi 10 жыл бұрын
ProgrammersCreed Thanks, I found what I did wrong. P.S in the "onsubmit=''" I have to end the "return check_info()" with ";"? for the code to work? I actually already checked it and it appear that there is no need for ";", but you still wrote it and so I would like to know why?
@QuentinWatt
@QuentinWatt 10 жыл бұрын
Even though there is no need for it, I still end every single statement off with a semi-colon just out of habit.
@bshirah
@bshirah 6 жыл бұрын
Hi, DrunkenShinobi. I encountered the same problem, but later realized that my id values' font case didn't match. I typed "Password" as the HTML id value, yet typed "password" in the JavaScript code. Consequently, they weren't communicating. Try checking your font case.
@tomazceljski
@tomazceljski 10 жыл бұрын
If I enter a username and password is left blank, I can still send the data. :o
@Therock619ist
@Therock619ist 3 жыл бұрын
same here.
@Voltairean
@Voltairean 9 жыл бұрын
Now make a tutorial on how to pronounce "data".
@TheCrusaderRabbits
@TheCrusaderRabbits 6 жыл бұрын
Nothing wrong with how he says data.
@chapmansbg
@chapmansbg 5 жыл бұрын
How he pronounces DATA is the correct English pronunciation. Americans that don't pronounce English words correctly pronounce the word DATA, Day Ta. So grow up.
@chapmansbg
@chapmansbg 5 жыл бұрын
either way is perfectly acceptable.
@priyap5200
@priyap5200 6 жыл бұрын
I have used the same code but it is redirecting to next page😒
@bshirah
@bshirah 6 жыл бұрын
Hi, priya p. I encountered the same problem, but later realized that my id values' font case didn't match. I typed "Password" as the HTML id value, yet typed "password" in the JavaScript code. Consequently, they weren't communicating. Try checking your font case.
@krutomjer
@krutomjer 10 жыл бұрын
If it doesn't work put three = in if statement. if(username==="" || password==="") { alert('Please fill in all fields'); return false; } else { return true; }
@oateurman
@oateurman 9 жыл бұрын
I think that this Stack Overflow post underlines the difficult point of this vid: stackoverflow.com/questions/5195933/with-form-validation-why-onsubmit-return-functionname-instead-of-onsubmit
@youthfulrider407
@youthfulrider407 9 жыл бұрын
Are you Zimbabwean?? Random question I know but I can hear a slight bit of African in there for sure!!
@QuentinWatt
@QuentinWatt 9 жыл бұрын
South African
@nayanamtanuj
@nayanamtanuj 9 жыл бұрын
Quentin Watt WHy do you use onsubmit event instead of onclick.. Both should be same right as per the definition you taught us in your lessons?! Please help me. Many Thanks.
@QuentinWatt
@QuentinWatt 9 жыл бұрын
nope. I never ever said that. A submit button submits data in the form to whatever page was listed in the form action. onclick is there just for fancy javascript actions. If you don't validate onsubmit then you won't stop the form from submitting if the data is wrong.
@nayanamtanuj
@nayanamtanuj 9 жыл бұрын
Quentin Watt Got it .. Thanks!! :) Keep up the good work.. :)
@faizanshafiq8685
@faizanshafiq8685 9 жыл бұрын
data sounded daughter :D
@yaseradventures
@yaseradventures 8 жыл бұрын
I Want To Create Excellent Codes....
@kamalsharif
@kamalsharif 9 жыл бұрын
Thanks for the tutorial. I want to validate form using Level2 DOM like using addEventListener('submit',function,false) andnodeValue, textContent etc. How to do this? Just have a look at the bottom of the JS section of my codepen (codepen.io/ksharifbd/pen/vEyydm). You'll have an idea. Please help me out in this regard. Quentin Watt
@Impuhlz
@Impuhlz 9 жыл бұрын
thank you for submitting your daughter
@chapmansbg
@chapmansbg 5 жыл бұрын
How he pronounces DATA is the correct English pronunciation. Americans that don't pronounce English words correctly pronounce the word DATA, Day Ta. So grow up.
@HellManStan
@HellManStan 10 жыл бұрын
Damn South Africans :D
@QuentinWatt
@QuentinWatt 10 жыл бұрын
:D
@bob-ym7sm
@bob-ym7sm 9 жыл бұрын
Wont work :|
@amieljohnnicolas3171
@amieljohnnicolas3171 6 жыл бұрын
i too hear daughter lol
@okmanek69
@okmanek69 8 жыл бұрын
1:46 - thank you for submitting your daughter. creepy.
@emmanuela.2932
@emmanuela.2932 7 жыл бұрын
He said that like three times. Triple creepy.
@chapmansbg
@chapmansbg 5 жыл бұрын
How he pronounces DATA is the correct English pronunciation. Americans that don't pronounce English words correctly pronounce the word DATA, Day Ta. So grow up.
@MrBigfatbean
@MrBigfatbean 9 жыл бұрын
Thanks for this great tutorial, I changed the subject with same way to do it ,but it's not work, Can someone help?? Age Gender function requireInfo(){ var condition = document.getElementById("condition"); var age = document.getElementById('age').value; var gender = document.getElementById('gender').value; if ( age >= 65 && gender =="M" ){ condition.innerHTML = "* Please fill out From A"; } else if( age >= 65 && gender == "F" ){ condition.innerHTML = "* Please fill out From B"; } else condition.innerHTML = "* Please fill out From D"; }
@koliniomusuka7851
@koliniomusuka7851 8 жыл бұрын
+MrBigfatbean i think you should nt use the condition.innerHTML in the if(){} statement you can use document.write or alert();
@teawrld5976
@teawrld5976 5 жыл бұрын
2:00 "Thank you for submitting your daughter" soo what if the user submit their son?
@teawrld5976
@teawrld5976 5 жыл бұрын
ps This video was really helpful, thanks alot.
@QuentinWatt
@QuentinWatt 5 жыл бұрын
Everyone knows you should drag your vowels out. Daaaaaaata. :D
@goollata7557
@goollata7557 9 жыл бұрын
why he need to talk so long before writing the code? Kinda boring but i think i like what he taught in this video.
@zuber3228
@zuber3228 6 жыл бұрын
why did't you use this && instead of this || , ,you are checking the two fields of value not one, if any of the field is unfield just return false, lolllllllllllllllllllllllll coding, keep studying along with teaching
JavaScript beginner tutorial 31 - radio buttons
9:20
Quentin Watt Tutorials
Рет қаралды 83 М.
JavaScript beginner tutorial 19 - switch statements
12:14
Quentin Watt Tutorials
Рет қаралды 87 М.
IS THIS REAL FOOD OR NOT?🤔 PIKACHU AND SONIC CONFUSE THE CAT! 😺🍫
00:41
Каха инструкция по шашлыку
01:00
К-Media
Рет қаралды 8 МЛН
A pack of chips with a surprise 🤣😍❤️ #demariki
00:14
Demariki
Рет қаралды 35 МЛН
When someone reclines their seat ✈️
00:21
Adam W
Рет қаралды 27 МЛН
Google Data Center 360° Tour
8:29
Google Cloud Tech
Рет қаралды 5 МЛН
JavaScript beginner tutorial 20 - while loop
12:03
Quentin Watt Tutorials
Рет қаралды 69 М.
Три Кота | Все серии | Мультфильмы для детей
Три Кота: Мультфильмы для детей
Рет қаралды 6 М.
NEVER lose dotfiles again with GNU Stow
14:33
typecraft
Рет қаралды 16 М.
JavaScript beginner tutorial 24 - referencing elements in JavaScript
10:22
Quentin Watt Tutorials
Рет қаралды 56 М.
Apple Is at Start of AI Supercycle, Wedbush's Ives Says
3:51
Bloomberg Television
Рет қаралды 2,5 М.
IS THIS REAL FOOD OR NOT?🤔 PIKACHU AND SONIC CONFUSE THE CAT! 😺🍫
00:41