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:
http://www.youtube.com/user/QuentinWatt Social links:
————————————————————-
Add me on twitter:
Tweets by QuentinWatt
facebook group:
https://www.facebook.com/quentin.watt
————————————————————-
Original source
33 responses to “JavaScript beginner tutorial 30 – form validation text boxes and passwords”
Thank you!
Thanks !
Great video! Thanks 🙂
in onsubmit attribute where and what it is returning ?pl clarify
Can someone help me, why this code is not working?! Its getting me on submission.html even when i dont type anything in
<script type="text/javascript">
function check_info(){
var uName = document.getElementById("username");
var passw = document.getElementById("password");
if(uName== "" || passw== ""){
alert("Please fill in all fields");
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form action="submission.html" method="post" onsubmit="return check_info();">
username:<input type="text" name="username" id="username">
password:<input type="password" name="password" id="password">
<input type="submit" value = "Login">
</form>
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.
Nic teaching sir thankyou
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?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>validate form</title>
<script type="text/javascript">
function validate(){
var username = document.getElementsById("username").value;
var password = document.getElementsById("password").value;
if (username == "" && password == "") {
alert("please fill all the fields");
return false;
}
else{
return true;
}
}
</script>
</head>
<body>
<form action="cool.html" method="post" onsubmit=" return validate();">
<input type="text" name="username" id="username" placeholder="Username"/><br>
<input type="password" name="password" id="password" placeholder="password"/>
<input type="submit" value="login"/>
</form>
</body>
</html>
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
Thanks Quentin. It's awesome video.
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!
amazing wow thanks
Hey Quentin, is it better practice to handle events in our scripts rather than HTML?
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
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?
when i click login, with blank fields, nothing happens!
Why if we replace (username == "") || (password == '") to (username = null) || (password == null)
It does not work
how can we use normal empty message instead of alertbox?
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
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;}
}
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?
<html>
<head>
<meta charset="utf-8"/>
<title>form</title>
<script type="text/javascript">
function new(){
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
if(username==""||password=="")
{alert('pls fill the details');
return false;
}
else{
return true;
}
}
</script>
<body>
<form action="second.html" method="get" onsubmit="return new();" >
username:<input type="text" name="username" id="username"/><br/>
password:<input type="password" name="password" id="password"/><br/>
<input type="button" value="login"/>
</form>
</body>
</html>
whats the problem in this code quinton???
<html>
<head>
<meta charset="utf-8"/>
</head>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Thanks for Submission</h1>
</body>
</html>
its not run..
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
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
Awesome
Very nice tutorials sir your explanation is very good keep posting sir 🙂
but what if user submitted incorrect data ?
Many thanks.
Your tutorials are so helpful, I used them to study for my final Exam you make them so easy to understand.#ContinueTheGoodWork
I don't suppose that you have released a video that teaches how to validate based on the amount of characters in a text box? I do appreciate these tutorials! Thank you very much.
it is good! do for another
thank you, I was looking to learn this all week… and finally understood where my mistakes were….
What would I need to change to validate a fieldset?